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
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Su | Mo | Tu | We | Th | Fr | Sa |
---|---|---|---|---|---|---|
28 | 29 | 30 | 31 | 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 | 7 |
Loading...
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.
Property | Description | Type | Default | Global Config |
---|---|---|---|---|
[nzId] | input id attribute inside the component | string | - | |
[nzAllowClear] | Whether to show clear button | boolean | true | - |
[nzAutoFocus] | get focus when component mounted | boolean | false | - |
[nzBackdrop] | whether or not the overlay should attach a backdrop | boolean | false | |
[nzDefaultPickerValue] | default picker date | Date | Date[] | - |
[nzDisabled] | determine whether the nz-date-picker is disabled | boolean | false | - |
[nzDisabledDate] | specify the date that cannot be selected | (current: Date) => boolean | - | - |
[nzDropdownClassName] | to customize the className of the popup calendar | string | - | - |
[nzFormat] | to set the date format, see nzFormat special instructions | string | - | |
[nzInputReadOnly] | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | - |
[nzLocale] | localization configuration | object | default | - |
[nzMode] | Set picker mode | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'date' | |
[nzPlaceHolder] | placeholder of date input | string | string[] | - |
[nzPopupStyle] | to customize the style of the popup calendar | object | {} | - |
[nzRenderExtraFooter] | render extra footer in panel | TemplateRef | 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 icon | string | TemplateRef | - |
[nzBorderless] | remove the border | boolean | false | - |
[nzInline] | inline mode | boolean | false | - |
(nzOnOpenChange) | a callback emitter, can be executed whether the popup calendar is popped up or closed | EventEmitter<boolean> | - | - |
Common Methods#
Name | Description |
---|---|
open() | open calendar panel |
close() | close calendar panel |
nz-date-picker#
Property | Description | Type | Default |
---|---|---|---|
[(ngModel)] | Date | Date | - |
nz-date-picker[nzMode="date"]#
Property | Description | Type | Default |
---|---|---|---|
[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 selection | object | boolean | TimePicker Options |
[nzShowToday] | whether to show 'Today' button | boolean | true |
[nzShowNow] | whether to show 'Now' button on panel when nzShowTime is set | boolean | true |
[nzShowWeekNumber] | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | boolean | false |
(nzOnOk) | callback when click ok button | EventEmitter<Date> | - |
nz-range-picker#
Property | Description | Type | Default |
---|---|---|---|
[(ngModel)] | Date | Date[] | - |
[nzRanges] | preseted ranges for quick selection | { [ key: string ]: Date[] } | { [ key: string ]: () => Date[] } | - |
[nzSeparator] | separator | string | TemplateRef | '~' |
(nzOnCalendarChange) | The start time or the end time of the range change callback | EventEmitter<Date[]> | - |
nz-range-picker[nzMode="date"]#
Property | Description | Type | Default |
---|---|---|---|
[nzShowTime] | to provide an additional time selection | object | boolean | TimePicker 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) | boolean | false |
(nzOnOk) | click ok callback | EventEmitter<Date[]> | - |
Currently, supported
nz-time-picker
parameters innzShowTime
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.