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|