NG-ZORRO
DatePicker 日期选择框
输入或选择日期的控件。
何时使用 #
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';代码演示
最简单的用法，在浮层中可以选择或者输入日期。
加载中提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。
加载中
三种大小的输入框，若不设置，则为
default
。
加载中选择框的不可用状态。
加载中
当
RangePicker
无法满足业务需求时，可以使用两个
DatePicker
实现类似的功能。
- 通过设置
nzDisabledDate方法，来约束开始和结束日期。- 通过
open()来优化交互。
加载中在浮层中加入额外的页脚，以满足某些定制信息的需求。
加载中无边框样式。
加载中
使用
nzStatus
为 DatePicker 添加状态，可选
error
或者
warning
。
加载中
使用
nzShowWeekNumber
显示周数
加载中
通过设置
nzMode
属性，指定范围选择器类型。
加载中
使用
nzFormat
属性，可以自定义日期显示格式。
加载中
增加选择时间功能，当
nzShowTime
为一个对象时，其属性会传递给内建的
TimePicker
。
加载中
可用
nzDisabledDate
和
nzDisabledTime
分别禁止选择部分日期和时间。
加载中RangePicker 可以设置常用的 预设范围 提高用户体验。
加载中
使用
nzDateRender
可以自定义日期单元格的内容和样式。
加载中| 一 | 二 | 三 | 四 | 五 | 六 | 日 |
|---|---|---|---|---|---|---|
|
27
|
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
|
|
1
|
2
|
3
|
4
|
5
|
6
|
7
|
使用
nzInline
属性，可以渲染为内联模式。
加载中
可以通过
nzPlacement
手动指定弹出的位置。
加载中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 来进行反序列化。