TimePicker时间选择框

输入或选择时间的控件。

何时使用#

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

import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';

代码演示

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

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

expand codeexpand code
加载中

无边框样式。

expand codeexpand code
加载中

可以进行双向绑定。

expand codeexpand code
加载中

禁用时间选择。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

禁用部分时间选择。

expand codeexpand code
加载中

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

expand codeexpand code
加载中

API#

<nz-time-picker [(ngModel)]="someTime"></nz-time-picker>

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-
[nzInputReadOnly]为 input 标签设置只读属性(避免在移动设备上触发小键盘)booleanfalse-
[nzOpen]面板是否打开,可双向绑定booleanfalse
[nzPlaceHolder]没有值的时候显示的内容string"请选择时间"
[nzPopupClassName]弹出层类名string''
[nzUse12Hours]使用 12 小时制,为 true 时 format 默认为h:mm:ss abooleanfalse
[nzSuffixIcon]自定义的后缀图标stringTemplateRef-
(ngModelChange)时间发生变化的回调EventEmitter<Date>-
(nzOpenChange)面板打开/关闭时的回调EventEmitter<boolean>-

方法#

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