TimePickerComponent

Represents the Kendo UI TimePicker component for Angular.

typescript

@Component({
  selector: 'my-app',
  template: `
    <kendo-timepicker [(value)]="selectedTime"></kendo-timepicker>
  `
})
export class AppComponent {
  public selectedTime: Date = new Date();
}

Selector

kendo-timepicker

Export Name

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

Inputs

Name	Type	Default	Description
adaptiveMode	AdaptiveMode	'none'	Determines whether the TimePicker is in adaptive mode.
adaptiveSubtitle	string		Sets the subtitle text rendered in the header of the popup(action sheet). Applicable only when AdaptiveMode is set to auto. By default, subtitle is not rendered.
adaptiveTitle	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.
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	true	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	false	Determines whether the TimePicker is disabled (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	'solid'	Sets the fillMode of the component.
format	string	't'	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.
incompleteDateValidation	boolean	false	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	23:59:59	Specifies the biggest valid time value (see example).
min	Date	00:00:00	Specifies the smallest valid time value (see example).
nowButton	boolean	true	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	null	Specifies the hint the TimePicker displays when its value is null. For more information, refer to the article on placeholders.
popupSettings	PopupSettings		Configures the popup of the TimePicker. The available options are animate which controls the popup animation and by default, the open and close animations are enabled. The appendTo option controls the popup container and by default, the popup will be appended to the root component. The popupClass option specifies a list of CSS classes that are used to style the popup.
rangeValidation	boolean	true	Determines whether the built-in min or max validators are enforced when a form is being validated.
readonly	boolean	false	Determines the read-only state of the TimePicker (see example).
readOnlyInput	boolean	false	Sets the read-only state of the TimePicker input field (see example). 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	'medium'	Sets the rounded styling of the component.
size	DateInputSize	'medium'	Sets the size of the component.
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.
tabindex	number	0	Sets the tabindex of the TimePicker component.
value	Date		Determines whether the TimePicker is in adaptive mode. The value has to be a valid JavaScript Date instance or null.

Fields

Name	Type	Default	Description
isOpen	boolean		Returns 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.

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.