New to Kendo UI for Angular? Start a free 30-day trial

TimePickerComponent

Component

Represents the Kendo UI TimePicker component for Angular.

Definition

Package:@progress/kendo-angular-dateinputs

Selector:kendo-timepicker

Export Name:Accessible in templates as #kendo-timepickerInstance="kendo-timepicker"

Syntax:

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

Inputs

adaptiveMode

AdaptiveMode

Determines whether the TimePicker is in adaptive mode.

Default:

'none'

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.

Default:

allowCaretMode

boolean

Determines if the users should see a blinking caret inside the Date Input when possible.

Default:

false

autoSwitchKeys

string[]

A string array representing custom keys, which will move the focus to the next date format segment.

Default:

[]

autoSwitchParts

boolean

Determines whether to automatically move to the next segment after the user completes the current one.

Default:

true

cancelButton

boolean

Determines whether to display the Cancel button in the popup.

Default:

true

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.

Default:

false

disabled

boolean

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.

Default:

false

enableMouseWheel

boolean

Indicates whether the mouse scroll can be used to increase/decrease the time segments values.

Default:

true

fillMode

DateInputFillMode

Sets the fillMode of the component. The default value is set by the Kendo theme.

format

string

Specifies the time format that is used to display the input value (see example).

Default:

't'

formatPlaceholder

DateInputFormatPlaceholder

Defines the descriptions of the format sections in the input field. For more information, refer to the article on placeholders.

incompleteDateValidation

boolean

Determines whether the built-in validation for incomplete dates is to be enforced when a form is being validated.

Default:

false

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).

Default:

23:59:59

min

Date

Specifies the smallest valid time value (see example).

Default:

00:00:00

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.

Default:

true

placeholder

string

Specifies the hint the TimePicker displays when its value is null. For more information, refer to the article on placeholders.

Default:

null

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.