TimePicker Typescript API

Interface

TimePicker

Time Picker component allows the user to select time from spinners.

Selector

smart-time-picker

Properties

animationAnimation

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default valueadvanced

autoSwitchToMinutesboolean

Sets or gets whether after selecting hours, the element will automatically switch to minute selection.

Default valuefalse

disabledboolean

Enables or disables the element.

Default valuefalse

Determines whether the footer section of the element is visible or not.

Default valuefalse

footerTemplatestring | HTMLTemplateElement

Sets or gets the footer template. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, a default, empty, template is applied.

formatTimePickerFormat

Determines the hour selection format.

Default value12-hour

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value"en

localizeFormatFunctionany

Callback used to customize the format of the messages that are returned from the Localization Module.

messagesany

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

Default value


"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}


minuteIntervalnumber

Sets or gets the step when selecting minutes.

Default value1

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value"

readonlyboolean

Disables user interaction with the element.

Default valuefalse

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default valuefalse

selectionTimePickerSelection

Determines the view that is currently being shown. By default the hours view is visible.

Default valuehour

themestring

Determines the theme. Theme defines the look of the element

Default value"

unfocusableboolean

If is set to true, the element cannot be focused.

Default valuefalse

valueany

Sets or gets the value of the element. The value can be a valid Date object or a string representing a valid time.

Default valuenew Date()

viewViewLayout

Determines whether the element is in landscape or portrait mode.

Default valueportrait

onchange((this: Window, ev: Event) => any) | null

This event is triggered when the value is changed.

Arguments

evEvent
ev.detailObject
ev.detail.oldValue - The old value before it was changed presented as a Date object.
ev.detail.value - The new value presented as a Date object.

Methods

setHours( hours: number): void

Sets the hours.

Arguments

hoursnumber

The hours to set.


setMinutes( minutes: number): void

Sets the minutes.

Arguments

minutesnumber

The minutes to set.



Enums

Animation

None Simple Advanced

TimePickerFormat

Twelve2Hour Two4Hour

TimePickerSelection

Hour Minute

ViewLayout

Landscape Portrait