Skip to content

adnan-alhomssi/ngbe-datetime-picker

Repository files navigation

ng-bootsrap Date+Time picker extension

ng-bootstrap port of Bootstrap into Angular 5+ world comes with a datepicker and timepicker, but a component that combines both is sadly not in the box!

This component combines both in a popup window and returns a single native Javascript Date object.

Home / demo page

Install

It requires (for sure) @ng-bootstrap/ng-bootstrap version ^1.0.0 and bootstrap ^4 npm install --save ngbe-datetime-picker

Usage

First, import the NgbeDatetimePickerModule module into your own module

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    NgbeDatetimePickerModule,
    ...
  ],
  providers: [...],
  bootstrap: [...]
})

Add the datetime-picker tag where you want the popup to appear

<ngbe-datetime-picker [(value)]="demoDate" (valueChange)="valueChanged($event)" (popupClosed)="popupClosed($event)" #dtp></ngbe-datetime-picker>
<button (click)="dtp.toggle()">toggle</button>

#dtp is a local variable assigned to this component instance so it can be controlled from outside .toggle() is the only provided public function.

Inputs

Inputs Note
value Date object
showPopup boolean
showSeconds boolean, default = true
nowButton :NgbeDatetimePickerButtonInterface
clearButton :NgbeDatetimePickerButtonInterface
closeButton :NgbeDatetimePickerButtonInterface

NgbeDatetimePickerButtonInterface gives you the possibility to customize the buttons by passing an instance with

   show: boolean;
   label: string;
   cssClass: string;

the default css class is 'btn btn-secondary btn-sm' and the names are in english

Outputs

Outputs Note
value Date object
valueChange triggered whenever time or date changes with the date as payload
popupClosed by clicking outside the popup window (using ng-) or close button

About

Datetime picker component extension for ng-bootstrap

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published