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

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

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

Bordered-less style component.

expand codeexpand code
Loading...

Work with two-way binding.

expand codeexpand code
Loading...

A disabled state of the nz-time-picker.

expand codeexpand code
Loading...

Show stepped options by nzHourStepnzMinuteStepnzSecondStep.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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