DatePicker日期选择框
输入或选择日期的控件。
何时使用#
当用户需要输入一个日期,可以点击标准输入框,弹出日期面板进行选择。
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
代码演示
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
加载中
一 | 二 | 三 | 四 | 五 | 六 | 日 |
---|---|---|---|---|---|---|
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 | 8 |
加载中
加载中
API#
注意: nz-date-picker 的部分 locale 来自于 Angular 自身的国际化支持
,需要在 app.module.ts
文件中 引入相应的 Angular 语言包。
例如:
import {registerLocaleData} from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
注意: 所有输入输出日期对象均为 Date ,你可以通过 date-fns 工具库获得你需要的数据。
共同的 API#
以下 API 为 nz-date-picker、nz-range-picker 共享的 API。
参数 | 说明 | 类型 | 默认值 | 全局配置 |
---|---|---|---|---|
[nzId] | 组件内部 input 的 id 值 | string | - | |
[nzAllowClear] | 是否显示清除按钮 | boolean | true | - |
[nzAutoFocus] | 自动获取焦点 | boolean | false | - |
[nzBackdrop] | 浮层是否应带有背景板 | boolean | false | |
[nzDefaultPickerValue] | 默认面板日期 | Date | Date[] | - |
[nzDisabled] | 禁用 | boolean | false | - |
[nzDisabledDate] | 不可选择的日期 | (current: Date) => boolean | - | - |
[nzDropdownClassName] | 额外的弹出日历 className | string | - | - |
[nzFormat] | 展示的日期格式,见nzFormat特别说明 | string | - | |
[nzInputReadOnly] | 为 input 标签设置只读属性(避免在移动设备上触发小键盘) | boolean | false | - |
[nzLocale] | 国际化配置 | object | 默认配置 | - |
[nzMode] | 选择模式 | 'date' | 'week' | 'month' | 'quarter' | 'year' | 'date' | |
[nzPlaceHolder] | 输入框提示文字 | string | string[] | - | - |
[nzPopupStyle] | 额外的弹出日历样式 | object | {} | - |
[nzRenderExtraFooter] | 在面板中添加额外的页脚 | TemplateRef | string | (() => TemplateRef | string) | - | |
[nzSize] | 输入框大小,large 高度为 40px,small 为 24px,默认是 32px | 'large' | 'small' | - | - |
[nzStatus] | 设置校验状态 | 'error' | 'warning' | - | |
[nzPlacement] | 选择框弹出的位置 | 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight' | 'bottomLeft' | |
[nzSuffixIcon] | 自定义的后缀图标 | string | TemplateRef | - |
[nzBorderless] | 移除边框 | boolean | false | - |
[nzInline] | 内联模式 | boolean | false | - |
(nzOnOpenChange) | 弹出日历和关闭日历的回调 | EventEmitter<boolean> | - | - |
共同的方法#
名称 | 描述 |
---|---|
open() | 打开日历弹层 |
close() | 关闭日历弹层 |
nz-date-picker#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[(ngModel)] | 日期 | Date | - |
nz-date-picker[nzMode="date"]#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[nzDateRender] | 自定义日期单元格的内容(month-picker/year-picker 不支持) | TemplateRef<Date> | string | ((d: Date) => TemplateRef<Date> | string) | - |
[nzDisabledTime] | 不可选择的时间 | (current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds } | - |
[nzShowTime] | 增加时间选择功能 | object | boolean | TimePicker Options |
[nzShowToday] | 是否展示“今天”按钮 | boolean | true |
[nzShowNow] | 当设定了nzShowTime 的时候,面板是否显示“此刻”按钮 | boolean | true |
[nzShowWeekNumber] | 是否在每一行显示周数(仅日期选择器支持。周选择器始终显示周数) | boolean | false |
(nzOnOk) | 点击确定按钮的回调 | EventEmitter<Date> | - |
nz-range-picker#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[(ngModel)] | 日期 | Date[] | - |
[nzRanges] | 预设时间范围快捷选择 | { [ key: string ]: Date[] } | { [ key: string ]: () => Date[] } | - |
[nzSeparator] | 分隔符 | string | TemplateRef | '~' |
(nzOnCalendarChange) | 待选日期发生变化的回调 | EventEmitter<Date[]> | - |
nz-range-picker[nzMode="date"]#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
[nzShowTime] | 增加时间选择功能 | object | boolean | TimePicker Options |
[nzDisabledTime] | 不可选择的时间 | (current: Date, partial: 'start' | 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds } | - |
[nzShowWeekNumber] | 是否在每一行显示周数(仅日期选择器支持。周选择器始终显示周数) | boolean | false |
(nzOnOk) | 点击确定按钮的回调 | EventEmitter<Date[]> | - |
nzShowTime
中当前支持的nz-time-picker
参数有:nzFormat
,nzHourStep
,nzMinuteStep
,nzSecondStep
,nzDisabledHours
,nzDisabledMinutes
,nzDisabledSeconds
,nzHideDisabledOptions
,nzDefaultOpenValue
,nzAddOn
FAQ#
为何在设置 nzFormat="dd/MM/yyyy"
后手动输入不生效#
需要引入 date-fns
。日期格式化目前同时支持两种方式:DatePipe
(默认,语法参考)
和 date-fns
(见如何使用 date-fns
进行日期格式化)。当你引入 date-fns
后,NG-ZORRO 会使用它提供的 API 来进行反序列化。