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
加载中

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

expand codeexpand code
加载中

禁用部分时间选择。

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

方法#

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