DatePicker

API#

Note: Some of date-picker's locale are coming from Angular i18n, that should be provided in the file app.config.ts.

For example:

import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';

registerLocaleData(en);

Note: All input and output date objects are Date, you can manipulate it with date-fns.

Common API#

The following APIs are shared by nz-date-picker, nz-range-picker.

Custom clear icon (22.2.0)#

Mark a child element with the static nzDatePickerClearIcon attribute to replace the clear icon, following the same content projection pattern as Input’s nzInputClearIcon. This works with both nz-date-picker and nz-range-picker, including all picker modes. No additional directive import is needed.

If no custom content is provided, the filled close-circle icon is used. nzAllowClear still controls whether clearing is allowed; the clear icon is hidden when the picker is disabled or empty. The picker handles the click and clears the value, so the custom content does not need its own click handler. Use a non-interactive element such as nz-icon, span or svg.

<nz-date-picker [(ngModel)]="date">
  <nz-icon nzDatePickerClearIcon nzType="close" />
</nz-date-picker>

<nz-range-picker [(ngModel)]="range">
  <nz-icon nzDatePickerClearIcon nzType="close" />
</nz-range-picker>

Common Methods#

nz-date-pickercomponent#

nz-date-picker[nzMode="date"]component#

nz-range-pickercomponent#

nz-range-picker[nzMode="date"]component#

Currently, supported nz-time-picker parameters in nzShowTime are: nzFormat, nzHourStep, nzMinuteStep, nzSecondStep, nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds, nzHideDisabledOptions, nzDefaultOpenValue, nzAddOn

FAQ#

How to use custom date library in Date-Picker#

Refer to Date Adapter.

The overlay layer element does not follow the scroll position when scrolling#

By default, the overlay layer element uses body as the scroll container. If using another scroll container, add the CdkScrollable directive to the custom scroll container element. Note: You need to import the CdkScrollable directive or ScrollingModule module from @angular/cdk/scrolling.