DatePicker

To select or input a date.

When To Use#

By clicking the input box, you can select a date from a popup calendar.

import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';

Examples





Basic use case. Users can select or input a date in panel.

expand codeexpand code
Loading...
Date

Switch in different types of pickers by Select.

expand codeexpand code
Loading...





The input box comes in three sizes. default will be used if nzSize is omitted.

expand codeexpand code
Loading...


A disabled state of the DatePicker.

expand codeexpand code
Loading...

When RangePicker does not satisfied your requirements, try to implement similar functionality with two DatePicker.

  • Use the nzDisabledDate property to limit the start and end dates.
  • Improve user experience with open().
expand codeexpand code
Loading...


Bordered-less style component.

expand codeexpand code
Loading...

Add status to DatePicker with nzStatus, which could be error or warning.

expand codeexpand code
Loading...



Display week numbers with nzShowWeekNumber.

expand codeexpand code
Loading...




Set range picker type by nzMode prop.

expand codeexpand code
Loading...


We can set the date format by nzFormat.

expand codeexpand code
Loading...

This property provide an additional time selection. When nzShowTime is an Object, its properties will be passed on to built-in TimePicker.

expand codeexpand code
Loading...



Disabled part of dates and time by nzDisabledDate and nzDisabledTime respectively.

expand codeexpand code
Loading...

We can set presetted ranges to RangePicker to improve user experience.

expand codeexpand code
Loading...

We can customize the rendering of date cells in the calendar by providing a nzDateRender function to DatePicker.

expand codeexpand code
Loading...
SuMoTuWeThFrSa
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6

We can set the inline mode by nzInline.

expand codeexpand code
Loading...



You can manually specify the position of the popup via nzPlacement.

expand codeexpand code
Loading...

API#

Note: Some of nz-date-picker's locale are coming from Angular i18n, that should be provided in the file of app.module.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.

PropertyDescriptionTypeDefaultGlobal Config
[nzId]input id attribute inside the componentstring-
[nzAllowClear]Whether to show clear buttonbooleantrue-
[nzAutoFocus]get focus when component mountedbooleanfalse-
[nzBackdrop]whether or not the overlay should attach a backdropbooleanfalse
[nzDefaultPickerValue]default picker dateDateDate[]-
[nzDisabled]determine whether the nz-date-picker is disabledbooleanfalse-
[nzDisabledDate]specify the date that cannot be selected(current: Date) => boolean--
[nzDropdownClassName]to customize the className of the popup calendarstring--
[nzFormat]to set the date format, see nzFormat special instructionsstring-
[nzInputReadOnly]set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)booleanfalse-
[nzLocale]localization configurationobjectdefault-
[nzMode]Set picker mode'date''week''month'
[nzPlaceHolder]placeholder of date inputstringstring[]-
[nzPopupStyle]to customize the style of the popup calendarobject{}-
[nzRenderExtraFooter]render extra footer in panelTemplateRef | string | (() => TemplateRef | string)-
[nzSize]determine the size of the input box, the height of large and small, are 40px and 24px respectively, while default size is 32px'large' | 'small'--
[nzStatus]Set validation status'error' | 'warning'-
[nzPlacement]The position where the selection box pops up'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight''bottomLeft'
[nzSuffixIcon]the custom suffix iconstringTemplateRef-
[nzBorderless]remove the borderbooleanfalse-
[nzInline]inline modebooleanfalse-
(nzOnOpenChange)a callback emitter, can be executed whether the popup calendar is popped up or closedEventEmitter<boolean>--

Common Methods#

NameDescription
open()open calendar panel
close()close calendar panel

nz-date-picker#

PropertyDescriptionTypeDefault
[(ngModel)]DateDate-

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

PropertyDescriptionTypeDefault
[nzDateRender]custom rendering function for date cells (Not support by month-picker/year-picker)-TemplateRef<Date> | string | ((d: Date) => TemplateRef<Date> | string)
[nzDisabledTime]to specify the time that cannot be selected(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }-
[nzShowTime]to provide an additional time selectionobject | booleanTimePicker Options
[nzShowToday]whether to show 'Today' buttonbooleantrue
[nzShowNow]whether to show 'Now' button on panel when nzShowTime is setbooleantrue
[nzShowWeekNumber]whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers)booleanfalse
(nzOnOk)callback when click ok buttonEventEmitter<Date>-

nz-range-picker#

PropertyDescriptionTypeDefault
[(ngModel)]DateDate[]-
[nzRanges]preseted ranges for quick selection{ [ key: string ]: Date[] } | { [ key: string ]: () => Date[] }-
[nzSeparator]separatorstring | TemplateRef'~'
(nzOnCalendarChange)The start time or the end time of the range change callbackEventEmitter<Date[]>-

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

PropertyDescriptionTypeDefault
[nzShowTime]to provide an additional time selectionobject | booleanTimePicker Options
[nzDisabledTime]to specify the time that cannot be selected(current: Date, partial: 'start' | 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }-
[nzShowWeekNumber]whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers)booleanfalse
(nzOnOk)click ok callbackEventEmitter<Date[]>-

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

FAQ#

Why does manual input not take effect after setting nzFormat="dd/MM/yyyy"#

You need to use date-fns. Date formatting currently supports two methods: DatePipe (default, syntax reference) and date-fns (see How to format a date using date-fns).NG-ZORRO takes the function provided by date-fns to implement date deserialization after using it.