TimePickerComponent

Represents the Kendo UI TimePicker component for Angular.

Selector

kendo-timepicker

Export Name

Accessible in templates as #kendoTimePickerInstance="kendo-timepicker"

Inputs

Name	Type	Default	Description
adaptiveMode	AdaptiveMode		Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
allowCaretMode	boolean	false	Determines if the users should see a blinking caret inside the Date Input when possible.
autoSwitchKeys	string[]		A string array representing custom keys, which will move the focus to the next date format segment.
autoSwitchParts	boolean	true	Determines whether to automatically move to the next segment after the user completes the current one.
cancelButton	boolean		Determines whether to display the Cancel button in the popup.
clearButton	boolean	false	If set to true, renders a clear button after the input text or TimePicker value has been changed. Clicking this button resets the value of the component to null and triggers the valueChange event.
disabled	boolean		Sets or gets the disabled property of the TimePicker and determines whether the component is active (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.
enableMouseWheel	boolean	true	Indicates whether the mouse scroll can be used to increase/decrease the time segments values.
fillMode	DateInputFillMode		Sets the fillMode of the component. The possible values are: solid (Default) flat outline none
format	string		Specifies the time format that is used to display the input value (see example).
formatPlaceholder	DateInputFormatPlaceholder		Defines the descriptions of the format sections in the input field. For more information, refer to the article on placeholders. ts @Component({ selector: 'my-app', template: ` <div class="row example-wrapper" [style.min-height.px]="450"> <div class="col-xs-12 col-md-6 example-col"> <p>Full-length format description:</p> <kendo-timepicker formatPlaceholder="wide"></kendo-timepicker> </div> <div class="col-xs-12 col-md-6 example-col"> <p>Narrow-length format description:</p> <kendo-timepicker formatPlaceholder="narrow"></kendo-timepicker> </div> <div class="col-xs-12 col-md-6 example-col"> <p>Short-length format description:</p> <kendo-timepicker formatPlaceholder="short"></kendo-timepicker> </div> <div class="col-xs-12 col-md-6 example-col"> <p>Display defined format:</p> <kendo-timepicker format="HH:mm:ss" formatPlaceholder="formatPattern"></kendo-timepicker> </div> <div class="col-xs-12 col-md-6 example-col"> <p>Custom defined format descriptions</p> <kendo-timepicker format="HH:mm:ss" [formatPlaceholder]="{ hour: 'H', minute: 'm', second: 's' }" ></kendo-timepicker> </div> </div> ` }) export class AppComponent { }
incompleteDateValidation	boolean		Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.
inputAttributes	{[key: string]: string}		Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
max	Date		Specifies the biggest valid time value (see example).
min	Date		Specifies the smallest valid time value (see example).
nowButton	boolean		Determines whether to display the Now button in the popup. If the current time is out of range or the incremental step is greater than 1, the Now button will be hidden.
placeholder	string		Specifies the hint the TimePicker displays when its value is null. For more information, refer to the article on placeholders. ts @Component({ selector: 'my-app', template: ` <kendo-timepicker placeholder="Enter start..."></kendo-timepicker> ` }) export class AppComponent { }
popupSettings	PopupSettings		Configures the popup of the TimePicker. The available options are: animate: Boolean—Controls the popup animation. By default, the open and close animations are enabled. appendTo: 'root' | 'component' | ViewContainerRef—Controls the popup container. By default, the popup will be appended to the root component. popupClass: String—Specifies a list of CSS classes that are used to style the popup.
rangeValidation	boolean		Determines whether the built-in min or max validators are enforced when a form is being validated.
readonly	boolean	false	Sets the read-only state of the TimePicker (see example).
readOnlyInput	boolean		Sets the read-only state of the TimePicker input field (see example). Note that if you set the readonly property value to true, the input will be rendered in a read-only state regardless of the readOnlyInput value.
rounded	DateInputRounded		Sets the border radius of the component. The possible values are: small medium (Default) large full none
size	DateInputSize		Sets the size of the component. The possible values are: small medium (Default) large none
steps	TimePickerIncrementalSteps		Configures the incremental steps of the TimePicker. For more information, refer to the article on incremental steps. If the incremental step is greater than 1, the Now button will be hidden. ts @Component({ selector: 'my-app', template: ` <kendo-timepicker format="HH:mm:ss" [steps]="steps"></kendo-timepicker> ` }) class AppComponent { public steps = { hour: 2, minute: 15, second: 15, millisecond: 10 }; }
subtitle	string		Sets the subtitle text rendered in the header of the popup(action sheet). Applicable only when AdaptiveMode is set to auto.
tabindex	number		Sets or gets the tabindex property of the TimePicker.
title	string		Sets the title of the input element of the TimePicker and the title text rendered in the header of the popup(action sheet). Applicable only when AdaptiveMode is set to auto.
value	Date		Specifies the value of the TimePicker component. The value has to be a valid JavaScript Date instance or null.

Fields

Name	Type	Default	Description
isOpen	boolean		Indicates whether the component is currently open. That is when the popup or actionSheet is open.

Events

Name	Type	Description
close	EventEmitter<PreventableEvent>	Fires each time the popup is about to close (see example). This event is preventable. If you cancel the event, the popup will remain open.
blur	EventEmitter<any>	Fires each time the input element gets blurred (see example).
focus	EventEmitter<any>	Fires each time the user focuses the input element (see example).
open	EventEmitter<PreventableEvent>	Fires each time the popup is about to open (see example). This event is preventable. If you cancel the event, the popup will remain closed.
valueChange	EventEmitter<Date>	Fires each time the user selects a new value (see example).

Methods

blur
Blurs the TimePicker component.

focus
Focuses the TimePicker component. ts @Component({ selector: 'my-app', template: ` <button (click)="timepicker.focus()">Focus time picker</button> <kendo-timepicker #timepicker></kendo-timepicker> ` }) export class AppComponent { }

toggle
Toggles the visibility of the popup or actionSheet. If you use the toggle method to show or hide the popup or actionSheet, the open and close events do not fire.
Parameters show? boolean The state of the popup.