TimePicker — Smart UI JavaScript API

TimePicker — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TimePicker - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-time-picker id="demo-timepicker"></smart-time-picker>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.timepicker.js';

    const el = document.getElementById('demo-timepicker');
    if (el) {

      el.value = new Date(2026, 3, 9, 10, 0);
      el.format = '24-hour';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: TimePicker   Framework: JavaScript   Selector: smart-time-picker

API counts: 19 properties, 2 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: setHours(), setMinutes()

Common events: change

Module hint: smart-webcomponents/source/modules/smart.timepicker.js

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

Class

TimePicker

TimePicker

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

Selector

smart-time-picker

Quick picks

changedisabledvalue

Properties

AanimationControls the animation mode for the component. When set to 'none', all animations are disabled. When set to other supported values, animations will be enabled according to the specified mode. This property can be used to either retrieve the current animation mode or update it dynamically.
AautoSwitchToMinutesDetermines whether, after selecting the hour, the component will automatically advance to the minute selection view. When enabled, users will be guided directly to choose minutes immediately after choosing an hour, streamlining the time selection process. This option can be set or retrieved programmatically.
DdisabledSpecifies whether the element is active and can be interacted with by the user. When enabled, the element responds to user actions; when disabled, the element appears visually inactive and does not accept user input or interaction.
FfooterSpecifies whether the footer section of the element is displayed to the user. If set to true, the footer will be visible; if false, the footer will be hidden.
FfooterTemplateSpecifies or retrieves the footer template used by the component. This property accepts either the ID of an existing HTMLTemplateElement or a direct reference to an HTMLTemplateElement object. When assigning an ID, the component will search the DOM for a template with the corresponding ID and use it as the footer template. If a direct reference is provided, that template will be used. If the value is set to null, the component will revert to its default behavior by applying an empty template to the footer area.
FformatSpecifies the format used for selecting hours, such as 12-hour (AM/PM) or 24-hour (military) time.
LlocaleSpecifies or retrieves the current language setting. This property is typically used together with the messages property to determine which language version of the messages should be displayed or retrieved. When setting the language, the corresponding localized messages from the messages collection will be used.
LlocalizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized text is structured, such as adding dynamic values, adjusting syntax, or applying custom formatting rules before the message is displayed to the user.
MmessagesDefines or retrieves an object containing string resources used throughout the widget interface, which can be localized to support different languages and regions. This property works in tandem with the language property to display text in the user's preferred language, enabling comprehensive internationalization of the widget's UI elements and messages.
MminuteIntervalSpecifies or retrieves the increment value (in minutes) used when adjusting or selecting the minute portion of a time input. This determines the intervals by which minutes can be increased or decreased, such as allowing selection at every 5 minutes (e.g., 0, 5, 10, 15, etc.) instead of every 1 minute.
NnameSets or retrieves the name attribute of the element. The name attribute identifies the element when submitting HTML forms, allowing its value to be included as a key in the form data sent to the server. This is essential for server-side processing and distinguishing between multiple form fields.
RreadonlyPrevents any user interactions with the element, such as clicking, tapping, focusing, or selecting content. While disabled, the element will not respond to mouse, keyboard, or touch events, and interactive features (like links or form inputs) will not be accessible.
RrightToLeftGets or sets a value that specifies whether the element is aligned to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's alignment and layout are adjusted to accommodate right-to-left text direction for proper localization.
SselectionSpecifies which view is currently displayed to the user. By default, the hours view is initially shown unless a different view is set. This property controls the visible section of the interface, such as hours, minutes, or other available views.
TthemeSpecifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel for the element within the user interface.
UunfocusableWhen set to true, this property makes the element unfocusable, preventing it from receiving keyboard or mouse focus during user interaction or via scripting.
UunlockKeySets or retrieves the unlockKey, a unique value required to activate or grant access to the product's features. This key is used to validate and unlock product functionality.
VvalueSets or retrieves the value of the element. The value can be provided as a valid Date object or as a string formatted to represent a valid time (e.g., "14:30" for 2:30 PM). When setting, ensure the input matches the expected format; when getting, the returned value will reflect the current time value of the element.
VviewDetermines the current orientation of the element, indicating whether its width is greater than its height (landscape mode) or its height is greater than its width (portrait mode). This property allows developers to adapt layout and styles based on how the element is displayed.

Events

CchangeThis event is triggered whenever the value associated with the component or input field is modified, either by user interaction or programmatically. It is dispatched after the change has occurred, allowing event handlers to respond to updates in the value.

Methods

SsetHoursSpecifies the hour component of the time value, typically as an integer ranging from 0 (midnight) to 23 (11 PM). This property or method updates the hours portion while leaving the minutes, seconds, and milliseconds unchanged, unless otherwise specified.
SsetMinutesSpecifies the value for the minutes component of a time, typically as an integer between 0 and 59. This is used to set or update the minute portion of a time-related field.

Properties

animationControls the animation mode for the component. When set to 'none', all animations are disabled. When set to other supported values, animations will be enabled according to the specified mode. This property can be used to either retrieve the current animation mode or update it dynamically."none" | "simple" | "advanced"

Controls the animation mode for the component. When set to 'none', all animations are disabled. When set to other supported values, animations will be enabled according to the specified mode. This property can be used to either retrieve the current animation mode or update it dynamically.

Allowed Values

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

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.animation = "simple";

Read the current value:

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

autoSwitchToMinutesDetermines whether, after selecting the hour, the component will automatically advance to the minute selection view. When enabled, users will be guided directly to choose minutes immediately after choosing an hour, streamlining the time selection process. This option can be set or retrieved programmatically.boolean

Determines whether, after selecting the hour, the component will automatically advance to the minute selection view. When enabled, users will be guided directly to choose minutes immediately after choosing an hour, streamlining the time selection process. This option can be set or retrieved programmatically.

Default value

false
Try a demo showcasing the autoSwitchToMinutes property.

Examples

Markup and runtime examples for autoSwitchToMinutes:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.autoSwitchToMinutes = false;

Read the current value:

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

disabledSpecifies whether the element is active and can be interacted with by the user. When enabled, the element responds to user actions; when disabled, the element appears visually inactive and does not accept user input or interaction.boolean

Specifies whether the element is active and can be interacted with by the user. When enabled, the element responds to user actions; when disabled, the element appears visually inactive and does not accept user input or interaction.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.disabled = false;

Read the current value:

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

Specifies whether the footer section of the element is displayed to the user. If set to true, the footer will be visible; if false, the footer will be hidden.

Default value

false
Try a demo showcasing the footer property.

Examples

Markup and runtime examples for footer:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.footer = false;

Read the current value:

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

footerTemplateSpecifies or retrieves the footer template used by the component. This property accepts either the ID of an existing HTMLTemplateElement or a direct reference to an HTMLTemplateElement object. When assigning an ID, the component will search the DOM for a template with the corresponding ID and use it as the footer template. If a direct reference is provided, that template will be used. If the value is set to null, the component will revert to its default behavior by applying an empty template to the footer area.string | HTMLTemplateElement

Specifies or retrieves the footer template used by the component. This property accepts either the ID of an existing HTMLTemplateElement or a direct reference to an HTMLTemplateElement object. When assigning an ID, the component will search the DOM for a template with the corresponding ID and use it as the footer template. If a direct reference is provided, that template will be used. If the value is set to null, the component will revert to its default behavior by applying an empty template to the footer area.

Try a demo showcasing the footerTemplate property.

Examples

Markup and runtime examples for footerTemplate:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.footerTemplate = "document.getElementsByTagName('template')[0]";

Read the current value:

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

formatSpecifies the format used for selecting hours, such as 12-hour (AM/PM) or 24-hour (military) time."12-hour" | "24-hour"

Specifies the format used for selecting hours, such as 12-hour (AM/PM) or 24-hour (military) time.

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.

Examples

Markup and runtime examples for format:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.format = "12-hour";

Read the current value:

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

localeSpecifies or retrieves the current language setting. This property is typically used together with the messages property to determine which language version of the messages should be displayed or retrieved. When setting the language, the corresponding localized messages from the messages collection will be used.string

Specifies or retrieves the current language setting. This property is typically used together with the messages property to determine which language version of the messages should be displayed or retrieved. When setting the language, the corresponding localized messages from the messages collection will be used.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.locale = "fr";

Read the current value:

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

localizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized text is structured, such as adding dynamic values, adjusting syntax, or applying custom formatting rules before the message is displayed to the user.function | null

A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized text is structured, such as adding dynamic values, adjusting syntax, or applying custom formatting rules before the message is displayed to the user.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

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

messagesDefines or retrieves an object containing string resources used throughout the widget interface, which can be localized to support different languages and regions. This property works in tandem with the language property to display text in the user's preferred language, enabling comprehensive internationalization of the widget's UI elements and messages.object

Defines or retrieves an object containing string resources used throughout the widget interface, which can be localized to support different languages and regions. This property works in tandem with the language property to display text in the user's preferred language, enabling comprehensive internationalization of the widget's UI elements and messages.

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

}

Examples

Markup and runtime examples for messages:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.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."}};

Read the current value:

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

minuteIntervalSpecifies or retrieves the increment value (in minutes) used when adjusting or selecting the minute portion of a time input. This determines the intervals by which minutes can be increased or decreased, such as allowing selection at every 5 minutes (e.g., 0, 5, 10, 15, etc.) instead of every 1 minute.number

Specifies or retrieves the increment value (in minutes) used when adjusting or selecting the minute portion of a time input. This determines the intervals by which minutes can be increased or decreased, such as allowing selection at every 5 minutes (e.g., 0, 5, 10, 15, etc.) instead of every 1 minute.

Default value

1
Try a demo showcasing the minuteInterval property.

Examples

Markup and runtime examples for minuteInterval:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.minuteInterval = 15;

Read the current value:

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

nameSets or retrieves the name attribute of the element. The name attribute identifies the element when submitting HTML forms, allowing its value to be included as a key in the form data sent to the server. This is essential for server-side processing and distinguishing between multiple form fields.string

Sets or retrieves the name attribute of the element. The name attribute identifies the element when submitting HTML forms, allowing its value to be included as a key in the form data sent to the server. This is essential for server-side processing and distinguishing between multiple form fields.

Default value

""
Try a demo showcasing the name property.

Examples

Markup and runtime examples for name:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

readonlyPrevents any user interactions with the element, such as clicking, tapping, focusing, or selecting content. While disabled, the element will not respond to mouse, keyboard, or touch events, and interactive features (like links or form inputs) will not be accessible.boolean

Prevents any user interactions with the element, such as clicking, tapping, focusing, or selecting content. While disabled, the element will not respond to mouse, keyboard, or touch events, and interactive features (like links or form inputs) will not be accessible.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.readonly = false;

Read the current value:

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

rightToLeftGets or sets a value that specifies whether the element is aligned to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's alignment and layout are adjusted to accommodate right-to-left text direction for proper localization.boolean

Gets or sets a value that specifies whether the element is aligned to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's alignment and layout are adjusted to accommodate right-to-left text direction for proper localization.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.rightToLeft = true;

Read the current value:

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

selectionSpecifies which view is currently displayed to the user. By default, the hours view is initially shown unless a different view is set. This property controls the visible section of the interface, such as hours, minutes, or other available views."hour" | "minute"

Specifies which view is currently displayed to the user. By default, the hours view is initially shown unless a different view is set. This property controls the visible section of the interface, such as hours, minutes, or other available views.

Allowed Values

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

Default value

"hour"
Try a demo showcasing the selection property.

Examples

Markup and runtime examples for selection:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.selection = "hour";

Read the current value:

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

themeSpecifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel for the element within the user interface.string

Specifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel for the element within the user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.theme = "red";

Read the current value:

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

unfocusableWhen set to true, this property makes the element unfocusable, preventing it from receiving keyboard or mouse focus during user interaction or via scripting.boolean

When set to true, this property makes the element unfocusable, preventing it from receiving keyboard or mouse focus during user interaction or via scripting.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.unfocusable = false;

Read the current value:

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

unlockKeySets or retrieves the unlockKey, a unique value required to activate or grant access to the product's features. This key is used to validate and unlock product functionality.string

Sets or retrieves the unlockKey, a unique value required to activate or grant access to the product's features. This key is used to validate and unlock product functionality.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-time-picker unlock-key=""></smart-time-picker>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

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

valueSets or retrieves the value of the element. The value can be provided as a valid Date object or as a string formatted to represent a valid time (e.g., "14:30" for 2:30 PM). When setting, ensure the input matches the expected format; when getting, the returned value will reflect the current time value of the element.any

Sets or retrieves the value of the element. The value can be provided as a valid Date object or as a string formatted to represent a valid time (e.g., "14:30" for 2:30 PM). When setting, ensure the input matches the expected format; when getting, the returned value will reflect the current time value of the element.

Default value

new Date()
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.value = "'12:30'";

Read the current value:

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

viewDetermines the current orientation of the element, indicating whether its width is greater than its height (landscape mode) or its height is greater than its width (portrait mode). This property allows developers to adapt layout and styles based on how the element is displayed."landscape" | "portrait"

Determines the current orientation of the element, indicating whether its width is greater than its height (landscape mode) or its height is greater than its width (portrait mode). This property allows developers to adapt layout and styles based on how the element is displayed.

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.

Examples

Markup and runtime examples for view:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-time-picker');
el.view = "landscape";

Read the current value:

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

Events

changeThis event is triggered whenever the value associated with the component or input field is modified, either by user interaction or programmatically. It is dispatched after the change has occurred, allowing event handlers to respond to updates in the value.CustomEvent

This event is triggered whenever the value associated with the component or input field is modified, either by user interaction or programmatically. It is dispatched after the change has occurred, allowing event handlers to respond to updates in the value.

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

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

Methods

setHours( hours: number): voidSpecifies the hour component of the time value, typically as an integer ranging from 0 (midnight) to 23 (11 PM). This property or method updates the hours portion while leaving the minutes, seconds, and milliseconds unchanged, unless otherwise specified.

Specifies the hour component of the time value, typically as an integer ranging from 0 (midnight) to 23 (11 PM). This property or method updates the hours portion while leaving the minutes, seconds, and milliseconds unchanged, unless otherwise specified.

Arguments

hoursnumber

The hours to set.

On the custom element in the DOM (narrow the selector, e.g. to #my-timepicker, if you host multiple widgets):

document.querySelector('smart-time-picker')?.setHours(5);

Try a demo showcasing the setHours method.

setMinutes( minutes: number): voidSpecifies the value for the minutes component of a time, typically as an integer between 0 and 59. This is used to set or update the minute portion of a time-related field.

Specifies the value for the minutes component of a time, typically as an integer between 0 and 59. This is used to set or update the minute portion of a time-related field.

Arguments

minutesnumber

The minutes to set.

On the custom element in the DOM (narrow the selector, e.g. to #my-timepicker, if you host multiple widgets):

document.querySelector('smart-time-picker')?.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