TimePicker时间选择框

输入或选择时间的控件。
使用

何时使用#

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

代码演示

点击 nz-time-picker,然后可以在浮层中选择或者输入某一时间。

      加载中
    

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

      加载中
    

nz-time-picker 浮层中的列会随着 nzFormat 变化,当略去 nzFormat 中的某部分时,浮层中对应的列也会消失。

      加载中
    

nz-time-picker 选择框底部显示自定义的内容。

      加载中
    


12小时制的时间选择器,默认format为 h:mm:ss a

      加载中
    

TimePicker 形态变体,可选 outlinedfilledborderlessunderlined 四种形态。

      加载中
    

可以进行双向绑定。

      加载中
    

禁用时间选择。

      加载中
    

可以使用 nzHourStepnzMinuteStepnzSecondStep 按步长展示可选的时分秒。

      加载中
    

禁用部分时间选择。

      加载中
    


使用 nzStatus 为 TimePicker 添加状态,可选 error 或者 warning

      加载中
    

API#

nz-time-picker#

参数说明类型默认值全局配置
[nzId]组件内部 input 的 id 值string-
[ngModel]当前时间Date-
[nzAddOn]选择框底部显示自定义的内容TemplateRef<void>-
[nzAllowEmpty]是否展示清除按钮booleantrue
[nzAutoFocus]自动获取焦点booleanfalse
[nzBackdrop]浮层是否应带有背景板booleanfalse
[nzClearText]清除按钮的提示文案string'clear'
[nzNowText]此刻按钮文本string'此刻'
[nzOkText]确认按钮文本string'确定'
[nzDefaultOpenValue][ngModel] 不存在时,可以设置面板打开时默认选中的值Datenew Date()
[nzDisabled]禁用全部操作booleanfalse
[nzDisabledHours]禁止选择部分小时选项() => number[]-
[nzDisabledMinutes]禁止选择部分分钟选项(hour: number) => number[]-
[nzDisabledSeconds]禁止选择部分秒选项(hour: number, minute: number) => number[]-
[nzFormat]展示的时间格式DatePipe'HH:mm:ss'
[nzHideDisabledOptions]隐藏禁止选择的选项booleanfalse
[nzHourStep]小时选项间隔number1
[nzMinuteStep]分钟选项间隔number1
[nzSecondStep]秒选项间隔number1
[nzSize]时间选择框大小'large' | 'small' | 'default''default'
[nzStatus]设置校验状态'error' | 'warning'-
[nzBorderless]移除边框booleanfalse-
[nzVariant]形态变体'outlined' | 'borderless' | 'filled' | 'underlined''outlined'
[nzInputReadOnly]为 input 标签设置只读属性(避免在移动设备上触发小键盘)booleanfalse-
[nzOpen]面板是否打开,可双向绑定booleanfalse
[nzPlaceHolder]没有值的时候显示的内容string'请选择时间'
[nzPopupClassName]弹出层类名string''
[nzUse12Hours]使用 12 小时制,为 true 时 format 默认为h:mm:ss abooleanfalse
[nzSuffixIcon]自定义的后缀图标string | TemplateRef-
(ngModelChange)时间发生变化的回调EventEmitter<Date>-
(nzOpenChange)面板打开/关闭时的回调EventEmitter<boolean>-

方法#

名称描述
blur()移除焦点
focus()获取焦点