DatePicker日期选择框

输入或选择日期的控件。

何时使用#

当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

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

代码演示






基本

最简单的用法，在浮层中可以选择或者输入日期。

expand codeexpand code
      加载中
Date
切换不同的选择器

提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。

expand codeexpand code
      加载中






三种大小

三种大小的输入框，若不设置，则为 default。

expand codeexpand code
      加载中


禁用

选择框的不可用状态。

expand codeexpand code
      加载中
自定义日期范围选择

当 RangePicker 无法满足业务需求时，可以使用两个 DatePicker 实现类似的功能。

  • 通过设置 nzDisabledDate 方法，来约束开始和结束日期。
  • 通过 open() 来优化交互。
expand codeexpand code
      加载中

无边框

无边框样式。

expand codeexpand code
      加载中
自定义状态

使用 nzStatus 为 DatePicker 添加状态，可选 error 或者 warning。

expand codeexpand code
      加载中



显示周数

使用 nzShowWeekNumber 显示周数

expand codeexpand code
      加载中





范围选择器

通过设置 nzMode 属性，指定范围选择器类型。

expand codeexpand code
      加载中



日期格式

使用 nzFormat 属性，可以自定义日期显示格式。

expand codeexpand code
      加载中

日期时间选择

增加选择时间功能，当 nzShowTime 为一个对象时，其属性会传递给内建的 TimePicker。

expand codeexpand code
      加载中




不可选择日期和时间

可用 nzDisabledDate 和 nzDisabledTime 分别禁止选择部分日期和时间。

expand codeexpand code
      加载中

预设范围

RangePicker 可以设置常用的 预设范围 提高用户体验。

expand codeexpand code
      加载中

定制日期单元格

使用 nzDateRender 可以自定义日期单元格的内容和样式。

expand codeexpand code
      加载中
一 二 三 四 五 六 日
25
26
27
28
29
30
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
今天
内联模式

使用 nzInline 属性，可以渲染为内联模式。

expand codeexpand code
      加载中



自定义位置

可以通过 nzPlacement 手动指定弹出的位置。

expand codeexpand code
      加载中

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]是否显示清除按钮booleantrue-
[nzAutoFocus]自动获取焦点booleanfalse-
[nzBackdrop]浮层是否应带有背景板booleanfalse
[nzDefaultPickerValue]默认面板日期DateDate[]-
[nzDisabled]禁用booleanfalse-
[nzDisabledDate]不可选择的日期(current: Date) => boolean--
[nzDropdownClassName]额外的弹出日历 classNamestring--
[nzFormat]展示的日期格式，见nzFormat特别说明string-
[nzInputReadOnly]为 input 标签设置只读属性（避免在移动设备上触发小键盘）booleanfalse-
[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]自定义的后缀图标stringTemplateRef-
[nzBorderless]移除边框booleanfalse-
[nzInline]内联模式booleanfalse-
(nzOnOpenChange)弹出日历和关闭日历的回调EventEmitter<boolean>--
(nzOnPanelChange)改变模式或日期的回调EventEmitter<NzPanelChangeType>--

共同的方法#

名称描述
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 | booleanTimePicker Options
[nzShowToday]是否展示“今天”按钮booleantrue
[nzShowNow]当设定了nzShowTime的时候，面板是否显示“此刻”按钮booleantrue
[nzShowWeekNumber]是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数）booleanfalse
(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 | booleanTimePicker Options
[nzDisabledTime]不可选择的时间(current: Date, partial: 'start' | 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }-
[nzShowWeekNumber]是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数）booleanfalse
(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 来进行反序列化。