TimePicker JAVASCRIPT UI Component API

TimePicker Javascript API

Class

TimePicker

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

Properties

animation"none" | "simple" | "advanced"

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

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-time-picker animation='none'></smart-time-picker>

Set the animation property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.animation = 'simple';

Get the animation property.

 const timepicker = document.querySelector('smart-time-picker');

 let animation = timepicker.animation;

autoSwitchToMinutesboolean

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

Default value

false

Try a demo showcasing the autoSwitchToMinutes property.

Example

Set the autoSwitchToMinutes property.

 <smart-time-picker auto-switch-to-minutes></smart-time-picker>

Set the autoSwitchToMinutes property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.autoSwitchToMinutes = false;

Get the autoSwitchToMinutes property.

 const timepicker = document.querySelector('smart-time-picker');

 let autoSwitchToMinutes = timepicker.autoSwitchToMinutes;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-time-picker disabled></smart-time-picker>

Set the disabled property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.disabled = false;

Get the disabled property.

 const timepicker = document.querySelector('smart-time-picker');

 let disabled = timepicker.disabled;

footerboolean

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

Default value

false

Try a demo showcasing the footer property.

Example

Set the footer property.

 <smart-time-picker footer></smart-time-picker>

Set the footer property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.footer = false;

Get the footer property.

 const timepicker = document.querySelector('smart-time-picker');

 let footer = timepicker.footer;

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.

Try a demo showcasing the footerTemplate property.

Example

Set the footerTemplate property.

 <smart-time-picker footer-template='template1'></smart-time-picker>

Set the footerTemplate property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.footerTemplate = document.getElementsByTagName('template')[0];

Get the footerTemplate property.

 const timepicker = document.querySelector('smart-time-picker');

 let footerTemplate = timepicker.footerTemplate;

format"12-hour" | "24-hour"

Determines the hour selection format.

Allowed Values

"12-hour" - Shows the hours from 0 to 12 and uses AM/PM button in the header.
"24-hour" - Shows the hours from 0 to 23

Default value

"12-hour"

Try a demo showcasing the format property.

Example

Set the format property.

 <smart-time-picker format='24-hour'></smart-time-picker>

Set the format property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.format = '12-hour';

Get the format property.

 const timepicker = document.querySelector('smart-time-picker');

 let format = timepicker.format;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-time-picker locale='de'></smart-time-picker>

Set the locale property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.locale = 'fr';

Get the locale property.

 const timepicker = document.querySelector('smart-time-picker');

 let locale = timepicker.locale;

localizeFormatFunctionfunction | null

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

Example

Set the localizeFormatFunction property.

 <smart-time-picker localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-time-picker>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const timepicker = document.querySelector('smart-time-picker');

 let localizeFormatFunction = timepicker.localizeFormatFunction;

messagesobject

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

}

Example

Set the messages property.

 <smart-time-picker messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-time-picker>

Set the messages property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.messages = {"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."}};

Get the messages property.

 const timepicker = document.querySelector('smart-time-picker');

 let messages = timepicker.messages;

minuteIntervalnumber

Sets or gets the step when selecting minutes.

Default value

Try a demo showcasing the minuteInterval property.

Example

Set the minuteInterval property.

 <smart-time-picker minute-interval='5'></smart-time-picker>

Set the minuteInterval property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.minuteInterval = 15;

Get the minuteInterval property.

 const timepicker = document.querySelector('smart-time-picker');

 let minuteInterval = timepicker.minuteInterval;

namestring

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

Default value

Example

Set the name property.

 <smart-time-picker name='time'></smart-time-picker>

Set the name property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.name = 'timepicker';

Get the name property.

 const timepicker = document.querySelector('smart-time-picker');

 let name = timepicker.name;

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property.

 <smart-time-picker readonly></smart-time-picker>

Set the readonly property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.readonly = false;

Get the readonly property.

 const timepicker = document.querySelector('smart-time-picker');

 let readonly = timepicker.readonly;

rightToLeftboolean

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

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-time-picker right-to-left></smart-time-picker>

Set the rightToLeft property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.rightToLeft = true;

Get the rightToLeft property.

 const timepicker = document.querySelector('smart-time-picker');

 let rightToLeft = timepicker.rightToLeft;

selection"hour" | "minute"

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

Allowed Values

"hour" - Shows the hours view.
"minute" - Shows the minutes view.

Default value

"hour"

Try a demo showcasing the selection property.

Example

Set the selection property.

 <smart-time-picker selection='minute'></smart-time-picker>

Set the selection property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.selection = 'hour';

Get the selection property.

 const timepicker = document.querySelector('smart-time-picker');

 let selection = timepicker.selection;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-time-picker theme='blue'></smart-time-picker>

Set the theme property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.theme = 'red';

Get the theme property.

 const timepicker = document.querySelector('smart-time-picker');

 let theme = timepicker.theme;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

 <smart-time-picker unfocusable></smart-time-picker>

Set the unfocusable property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.unfocusable = false;

Get the unfocusable property.

 const timepicker = document.querySelector('smart-time-picker');

 let unfocusable = timepicker.unfocusable;

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 value

new Date()

Example

Set the value property.

 <smart-time-picker value='new Date(2020, 0, 1, 20, 33)'></smart-time-picker>

Set the value property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.value = '12:30';

Get the value property.

 const timepicker = document.querySelector('smart-time-picker');

 let value = timepicker.value;

view"landscape" | "portrait"

Determines whether the element is in landscape or portrait mode.

Allowed Values

"landscape" - The header is positioned next to the time selection area.
"portrait" - The header is positioned above the time selection area.

Default value

"portrait"

Try a demo showcasing the view property.

Example

Set the view property.

 <smart-time-picker view='portrait'></smart-time-picker>

Set the view property by using the HTML Element's instance.

 const timepicker = document.querySelector('smart-time-picker');

 timepicker.view = 'landscape';

Get the view property.

 const timepicker = document.querySelector('smart-time-picker');

 let view = timepicker.view;

Events

changeCustomEvent

This event is triggered when the value is changed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

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

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Example

Set up the event handler of change event.

const timepicker = document.querySelector('smart-time-picker');
timepicker.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

setHours( hours: number): void

Sets the hours.

Arguments

hoursnumber

The hours to set.

Invoke the setHours method.

const timepicker = document.querySelector('smart-time-picker');
timepicker.setHours(5);

Try a demo showcasing the setHours method.

setMinutes( minutes: number): void

Sets the minutes.

Arguments

minutesnumber

The minutes to set.

Invoke the setMinutes method.

const timepicker = document.querySelector('smart-time-picker');
timepicker.setMinutes(5);

Try a demo showcasing the setMinutes method.

CSS Variables

--smart-time-picker-default-widthvar()

Default value

"var(--smart-editor-width)"

smartTimePicker default width

--smart-time-picker-default-heightvar()

Default value

"calc(12 * var(--smart-editor-height))"

smartTimePicker default height