TimePicker

To select/input a time.

When To Use#

By clicking the input box, you can select a time from a popup panel.

Import this Component Individually#

You can get more detail here.

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

Examples

Click nz-time-picker, and then we could select or input a time in panel.

expand codeexpand code
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);
}

The input box comes in three sizes. large is used in the form, while the medium size is the default.

expand codeexpand code
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();
}

While part of nzFormat is omitted, the corresponding column in panel will disappear, too.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-time-picker-hide-column',
  template: `
    <nz-time-picker [(ngModel)]="time" nzFormat="HH:mm"></nz-time-picker>
  `
})
export class NzDemoTimePickerHideColumnComponent {
  time = new Date();
}

Render addon contents to nz-time-picker panel's bottom.

expand codeexpand code
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;
}

TimePicker of 12 hours with default format h:mm:ss a

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-time-picker-use12Hours',
  template: `
    <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true"></nz-time-picker>
    <nz-time-picker [(ngModel)]="time" [nzUse12Hours]="true" nzFormat="h:mm a"></nz-time-picker>
  `,
  styles: [
    `
      nz-time-picker {
        margin: 0 8px 12px 0;
      }
    `
  ]
})
export class NzDemoTimePickerUse12HoursComponent {
  time: Date | null = null;
}

Work with two-way binding.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-time-picker-value',
  template: `
    <nz-time-picker [(ngModel)]="time" (ngModelChange)="log($event)"></nz-time-picker>
  `
})
export class NzDemoTimePickerValueComponent {
  time: Date | null = null;

  log(time: Date): void {
    console.log(time && time.toTimeString());
  }
}

A disabled state of the nz-time-picker.

expand codeexpand code
import { Component } from '@angular/core';

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

Show stepped options by nzHourStepnzMinuteStepnzSecondStep.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-time-picker-interval-options',
  template: `
    <nz-time-picker [nzMinuteStep]="15" [nzSecondStep]="10"></nz-time-picker>
  `
})
export class NzDemoTimePickerIntervalOptionsComponent {}

To specify the hours|minutes|seconds that cannot be selected

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-time-picker-disabled-part',
  template: `
    <nz-time-picker
      [nzDisabledHours]="disabledHours"
      [nzDisabledMinutes]="disabledMinutes"
      [nzDisabledSeconds]="disabledSeconds"
    ></nz-time-picker>
  `
})
export class NzDemoTimePickerDisabledPartComponent {
  disabledHours(): number[] {
    return [1, 2, 3];
  }

  disabledMinutes(hour: number): number[] {
    if (hour === 4) {
      return [20, 21, 22, 23, 24, 25];
    } else {
      return [];
    }
  }

  disabledSeconds(hour: number, minute: number): number[] {
    if (hour === 5 && minute === 1) {
      return [20, 21, 22, 23, 24, 25];
    } else {
      return [];
    }
  }
}

API#

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

nz-time-picker#

PropertyDescriptionTypeDefaultGlobal Config
[ngModel]to set timeDate-
[nzAddon]called from timepicker panel to render some addon to its bottomTemplateRef<void>-
[nzAllowEmpty]allow clearing textbooleantrue
[nzAutoFocus]get focus when component mountedbooleanfalse
[nzClearText]clear tooltip of iconstring'clear'
[nzDefaultOpenValue]default open panel value if [ngModel] is nullDatenew Date()
[nzDisabled]determine whether the TimePicker is disabledbooleanfalse
[nzDisabledHours]to specify the hours that cannot be selected() => number[]-
[nzDisabledMinutes]to specify the minutes that cannot be selected(hour: number) => number[]-
[nzDisabledSeconds]to specify the seconds that cannot be selected(hour: number, minute: number) => number[]-
[nzFormat]to set the time formatDatePipe"HH:mm:ss"
[nzHideDisabledOptions]hide the options that can not be selectedbooleanfalse
[nzHourStep]interval between hours in pickernumber1
[nzMinuteStep]interval between minutes in pickernumber1
[nzSecondStep]interval between seconds in pickernumber1
[nzOpen]whether to popup panel, double bindingbooleanfalse
[nzPlaceHolder]display when there's no valuestring"Select a time"
[nzPopupClassName]className of panelstring''
[nzUse12Hours]display as 12 hours format, with default format h:mm:ss abooleanfalse
(ngModelChange)a callback function, can be executed when the selected time is changingEventEmitter<Date>-
(nzOpenChange)a callback function which will be called while panel opening/closingEventEmitter<boolean>-

Methods#

NameDescription
blur()remove focus
focus()get focus