TimePicker时间选择框

输入或选择时间的控件。

何时使用

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

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

代码演示

TimePicker时间选择框 - 图1

基本

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-basic',
  4. template: ` <nz-time-picker [(ngModel)]="time" [nzDefaultOpenValue]="defaultOpenValue"></nz-time-picker> `
  5. })
  6. export class NzDemoTimePickerBasicComponent {
  7. time: Date | null = null;
  8. defaultOpenValue = new Date(0, 0, 0, 0, 0, 0);
  9. }

TimePicker时间选择框 - 图2

三种大小

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-size',
  4. template: `
  5. <nz-time-picker [(ngModel)]="time" nzSize="large"></nz-time-picker>
  6. <nz-time-picker [(ngModel)]="time"></nz-time-picker>
  7. <nz-time-picker [(ngModel)]="time" nzSize="small"></nz-time-picker>
  8. `,
  9. styles: [
  10. `
  11. nz-time-picker {
  12. margin: 0 8px 12px 0;
  13. }
  14. `
  15. ]
  16. })
  17. export class NzDemoTimePickerSizeComponent {
  18. time = new Date();
  19. }

TimePicker时间选择框 - 图3

选择时分

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-hide-column',
  4. template: `
  5. <nz-time-picker [(ngModel)]="time" nzFormat="HH:mm"></nz-time-picker>
  6. `
  7. })
  8. export class NzDemoTimePickerHideColumnComponent {
  9. time = new Date();
  10. }

TimePicker时间选择框 - 图4

附加内容

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-addon',
  4. template: `
  5. <nz-time-picker [(ngModel)]="time" [nzAddOn]="addOnTemplate" #timePicker></nz-time-picker>
  6. <ng-template #addOnTemplate>
  7. <button nz-button nzSize="small" nzType="primary" (click)="timePicker.close()">Ok</button>
  8. </ng-template>
  9. `
  10. })
  11. export class NzDemoTimePickerAddonComponent {
  12. time: Date | null = null;
  13. }

TimePicker时间选择框 - 图5

12小时制

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-use12-hours',
  4. template: `
  5. <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true" (ngModelChange)="log($event)"></nz-time-picker>
  6. <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true" (ngModelChange)="log($event)" nzFormat="h:mm a"></nz-time-picker>
  7. `,
  8. styles: [
  9. `
  10. nz-time-picker {
  11. margin: 0 8px 12px 0;
  12. }
  13. `
  14. ]
  15. })
  16. export class NzDemoTimePickerUse12HoursComponent {
  17. time: Date | null = null;
  18. log(value: Date): void {
  19. console.log(value);
  20. }
  21. }

TimePicker时间选择框 - 图6

数据绑定

可以进行双向绑定。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-value',
  4. template: `
  5. <nz-time-picker [(ngModel)]="time" (ngModelChange)="log($event)"></nz-time-picker>
  6. `
  7. })
  8. export class NzDemoTimePickerValueComponent {
  9. time: Date | null = null;
  10. log(time: Date): void {
  11. console.log(time && time.toTimeString());
  12. }
  13. }

TimePicker时间选择框 - 图7

禁用

禁用时间选择。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-disabled',
  4. template: `
  5. <nz-time-picker nzDisabled></nz-time-picker>
  6. `
  7. })
  8. export class NzDemoTimePickerDisabledComponent {}

TimePicker时间选择框 - 图8

步长选项

可以使用 nzHourStep``nzMinuteStep``nzSecondStep 按步长展示可选的时分秒。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-interval-options',
  4. template: `
  5. <nz-time-picker [nzMinuteStep]="15" [nzSecondStep]="10"></nz-time-picker>
  6. `
  7. })
  8. export class NzDemoTimePickerIntervalOptionsComponent {}

TimePicker时间选择框 - 图9

禁用部分

禁用部分时间选择。

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'nz-demo-time-picker-disabled-part',
  4. template: `
  5. <nz-time-picker
  6. [nzDisabledHours]="disabledHours"
  7. [nzDisabledMinutes]="disabledMinutes"
  8. [nzDisabledSeconds]="disabledSeconds"
  9. ></nz-time-picker>
  10. `
  11. })
  12. export class NzDemoTimePickerDisabledPartComponent {
  13. disabledHours(): number[] {
  14. return [1, 2, 3];
  15. }
  16. disabledMinutes(hour: number): number[] {
  17. if (hour === 4) {
  18. return [20, 21, 22, 23, 24, 25];
  19. } else {
  20. return [];
  21. }
  22. }
  23. disabledSeconds(hour: number, minute: number): number[] {
  24. if (hour === 5 && minute === 1) {
  25. return [20, 21, 22, 23, 24, 25];
  26. } else {
  27. return [];
  28. }
  29. }
  30. }

API

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

nz-time-pickercomponent

参数说明类型默认值全局配置
[ngModel]当前时间Date-
[nzAddon]选择框底部显示自定义的内容TemplateRef<void>-
[nzAllowEmpty]是否展示清除按钮booleantrue
[nzAutoFocus]自动获取焦点booleanfalse
[nzClearText]清除按钮的提示文案string‘clear’
[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]自定义的后缀图标string | TemplateRef-
(ngModelChange)时间发生变化的回调EventEmitter<Date>-
(nzOpenChange)面板打开/关闭时的回调EventEmitter<boolean>-

方法

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