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