Nebular - Datepicker Angular UI Component

NbDatepickerDirective

The NbDatepickerDirective is form control that gives you ability to select dates and ranges. The datepicker is shown when input receives a focus event.

<input [nbDatepicker]="datepicker">
<nb-datepicker #datepicker></nb-datepicker>

Installation

Import NbDatepickerModule.forRoot() to your root module.

@NgModule({
  imports: [
    // ...
    NbDatepickerModule.forRoot(),
  ],
})
export class AppModule { }

And NbDatepickerModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbDatepickerModule,
  ],
})

export class PageModule { }

Usage

If you want to use range selection, you have to use NbRangepickerComponent instead:

<input [nbDatepicker]="rangepicker">
<nb-rangepicker #rangepicker></nb-rangepicker>

Both range and date pickers support all parameters as calendar, so, check NbCalendarComponent for additional info.

Datepicker is the form control so it can be bound with angular forms through ngModel and form controls.

NbDatepickerDirective may be validated using min and max dates passed to the datepicker.

Also NbDatepickerDirective may be filtered using filter predicate that receives date object and has to return a boolean value.

If you need to pick a time along with the date, you can use nb-date-timepicker

<input nbInput placeholder="Pick Date" [nbDatepicker]="dateTimePicker">
<nb-date-timepicker withSeconds #dateTimePicker></nb-date-timepicker>

A single column picker with options value as time and minute, so users won’t be able to pick hours and minutes individually.

The NbDatepickerComponent supports date formatting:

<input [nbDatepicker]="datepicker">
<nb-datepicker #datepicker format="MM\dd\yyyy"></nb-datepicker>

Formatting Issue

By default, datepicker uses angulars LOCALE_ID token for localization and DatePipe for dates formatting. And native Date.parse(...) for dates parsing. But native Date.parse function doesn't support formats. To provide custom formatting you have to use one of the following packages:

@nebular/moment - provides moment date adapter that uses moment for date objects. This means datepicker than will operate only moment date objects. If you want to use it you have to install it: npm i @nebular/moment, and import NbMomentDateModule from this package.
@nebular/date-fns - adapter for popular date-fns library. This way is preferred if you need only date formatting. Because date-fns is treeshakable, tiny and operates native date objects. If you want to use it you have to install it: npm i @nebular/date-fns, and import NbDateFnsDateModule from this package.

NbDateFnsDateModule

Format is required when using NbDateFnsDateModule. You can set it via format input on datepicker component:

<nb-datepicker format="dd.MM.yyyy"></nb-datepicker>

Also format can be set globally with NbDateFnsDateModule.forRoot({ format: 'dd.MM.yyyy' }) and NbDateFnsDateModule.forChild({ format: 'dd.MM.yyyy' }) methods.

Please note to use some of the formatting tokens you also need to pass { useAdditionalWeekYearTokens: true, useAdditionalDayOfYearTokens: true } to date-fns parse and format functions. You can configure options passed this functions by setting formatOptions and parseOptions of options object passed to NbDateFnsDateModule.forRoot and NbDateFnsDateModule.forChild methods.

NbDateFnsDateModule.forRoot({
  parseOptions: { useAdditionalWeekYearTokens: true, useAdditionalDayOfYearTokens: true },
  formatOptions: { useAdditionalWeekYearTokens: true, useAdditionalDayOfYearTokens: true },
})

Further info on date-fns formatting tokens could be found at date-fns docs.

You can also use parseOptions and formatOptions to provide locale.

import { eo } from 'date-fns/locale';

@NgModule({
  imports: [
    NbDateFnsDateModule.forRoot({
      parseOptions: { locale: eo },
      formatOptions: { locale: eo },
    }),
  ],
})