TimePicker

To select/input a time.

When To Use#

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

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

Examples

Basic

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

expand codeexpand code
      Loading...
Three Sizes

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

expand codeexpand code
      Loading...
Hour and minute

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

expand codeexpand code
      Loading...
Addon

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

expand codeexpand code
      Loading...


12 hours

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

expand codeexpand code
      Loading...
Bordered-less

Bordered-less style component.

expand codeexpand code
      Loading...
Data binding

Work with two-way binding.

expand codeexpand code
      Loading...
disabled

A disabled state of the nz-time-picker.

expand codeexpand code
      Loading...
interval option

Show stepped options by nzHourStepnzMinuteStepnzSecondStep.

expand codeexpand code
      Loading...
disabled part

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

expand codeexpand code
      Loading...


Status

Add status to TimePicker with nzStatus, which could be error or warning.

expand codeexpand code
      Loading...

API#

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

nz-time-picker#

PropertyDescriptionTypeDefaultGlobal Config
[nzId]input id attribute inside the componentstring-
[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
[nzBackdrop]whether or not the overlay should attach a backdropbooleanfalse
[nzClearText]clear tooltip of iconstring'clear'✅
[nzNowText]text of the Now buttonstring'Now'✅
[nzOkText]text of the Ok buttonstring'Ok'✅
[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✅
[nzSize]width of time picker box'large' | 'small' | 'default''default'
[nzStatus]Set validation status'error' | 'warning'-
[nzBorderless]remove the borderbooleanfalse-
[nzInputReadOnly]set the readonly attribute of the input tag (avoids virtual keyboard on touch devices)booleanfalse-
[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✅
[nzSuffixIcon]the custom suffix iconstringTemplateRef-
(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