ngbe-datetime-picker v0.0.0-development

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

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