TimePicker时间选择框

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

基本

点击 ，然后可以在浮层中选择或者输入某一时间。

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

三种大小

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-time-picker-size',
  template: `
    <nz-time-picker [(ngModel)]="time" nzSize="large"></nz-time-picker>
    <nz-time-picker [(ngModel)]="time"></nz-time-picker>
    <nz-time-picker [(ngModel)]="time" nzSize="small"></nz-time-picker>
  `,
  styles: [
    `
      nz-time-picker {
        margin: 0 8px 12px 0;
      }
  ]
})
export class NzDemoTimePickerSizeComponent {
  time = new Date();
}

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

附加内容

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-time-picker-addon',
  template: `
    <nz-time-picker [(ngModel)]="time" [nzAddOn]="addOnTemplate" #timePicker></nz-time-picker>
    <ng-template #addOnTemplate>
      <button nz-button nzSize="small" nzType="primary" (click)="timePicker.close()">Ok</button>
    </ng-template>
  `
})
export class NzDemoTimePickerAddonComponent {
  time: Date | null = null;
}

12小时制

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-time-picker-use12-hours',
  template: `
    <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true" (ngModelChange)="log($event)"></nz-time-picker>
    <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true" (ngModelChange)="log($event)" nzFormat="h:mm a"></nz-time-picker>
  `,
  styles: [
    `
        margin: 0 8px 12px 0;
      }
    `
  ]
})
export class NzDemoTimePickerUse12HoursComponent {
  time: Date | null = null;
  log(value: Date): void {
    console.log(value);
  }
}

可以进行双向绑定。

禁用

禁用时间选择。

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-time-picker-disabled',
  template: `
    <nz-time-picker nzDisabled></nz-time-picker>
  `
})
export class NzDemoTimePickerDisabledComponent {}

步长选项

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

import { Component } from '@angular/core';
@Component({
  selector: 'nz-demo-time-picker-interval-options',
  template: `
    <nz-time-picker [nzMinuteStep]="15" [nzSecondStep]="10"></nz-time-picker>
  `
})

禁用部分时间选择。

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

方法