Basic Date Picker

Use ngbDatepicker along with input element to create basic date picker.

Model: {{ basicDPdata | json }}

Disabled Date Picker

Bind [disabled] by passing true to disable date picker & false to enable date picker.

i18n Date Picker

Use NgbDatepickerI18n extended component of ng-bootstrap to create i18n component. Read the official ngb-datepicker Documentation for a full list of instructions and other options.

Custom Day Date Picker

Use [dayTemplate] input property to create custom day date picker.

{{ date.day }}

Range selection Date Picker

To select range of dates use two input elements along with [dayTemplate] & [displayMonths] input properties for lower limit & upper limit respectively.

{{ date.day }}

From date model: {{ fromDate | json }}
To date model: {{ toDate | json }}

Basic Time Picker

Use ngb-timepicker to create basic Time Picker with spinner.


Selected time: {{ basicTP | json }}

Meridian Time Picker

Use [meridian]="true" along with ngb-timepicker to show meridian time.


Selected time: {{ meridianTPdata | json }}

Custom Time Picker

Use [seconds]="true" along with ngb-timepicker to show seconds.


Selected time: {{ customTPtime | json }}

Spinner Time Picker

Use [spinners]="false" along with ngb-timepicker to hide spinners.


Custom Validation Time Picker

Use [formControl] along with ngb-timepicker to create custom validation.

Great choice
Select some time during lunchtime
Oh no, it's way too late
It's a bit too early

Selected time: {{ customValidationTP.value | json }}

i18n Time Picker

Use NgbTimepickerI18n extended component of ng-bootstrap to create i18n component. Read the official ngb-timepicker Documentation for a full list of instructions and other options.