DatePicker 日期选择框

输入或选择日期的控件。

何时使用 #

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

代码演示

最简单的用法。

三种大小的输入框,大的用在表单中,中的为默认。

选择框的不可用状态。

可以设置 nzDisabledDate 方法,来约束开始和结束日期。

使用 nzFormat 属性,可以自定义你需要的日期显示格式,如 YYYY/MM/DD

增加选择时间功能,当 nzShowTime 为一个对象时,其属性会传递给内建的 nz-timepicker

设置 nzDisabledDate 方法,来确定不可选时段。

如上例:不可选择今天之后的日期。

API

日期类组件包括以下三种形式。

共同的 API

参数 说明 类型 默认值
nzSize 输入框大小,large 高度为 32px,small 为 22px,默认是 28px String month
nzFormat 展示的日期格式,配置参考 Moment.js文档 String "YYYY-MM-DD"
nzDisabled 禁用 boolean false
nzAllowClear 是否显示清除按钮 boolean true
nzShowTime 时间选项,参见 nz-timepicker 参数 boolean | NzTimePickerInnerComponent null
nzDisabledDate 用于禁用日期的回调函数,返回true表示禁用此日期 (Date) => boolean

nz-datepicker

参数 说明 类型 默认值
ngModel 展示日期 Date 当前日期
nzPlaceholder 输入框提示文字 String
nzMode 选择器模式, month 只选择到月份,day 选择到天 String "day"

nz-rangepicker

参数 说明 类型 默认值
ngModel 展示日期 [Date, Date] 当前日期
nzPlaceholder 输入框提示文字 [String, String]