TimeInput — 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>TimeInput - JavaScript Quick Start</title>
<link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
<smart-time-input id="demo-timeinput"></smart-time-input>
<script type="module">
import './node_modules/smart-webcomponents/source/modules/smart.timeinput.js';
const el = document.getElementById('demo-timeinput');
if (el) {
el.value = new Date(2026, 3, 9, 8, 30);
el.dateTimeFormat = 'HH:mm';
el.addEventListener('change', (event) => console.log('change:', event.detail || event));
}
</script>
</body>
</html>
For AI tooling
Developer Quick Reference
Component: TimeInput Framework: JavaScript Selector: smart-time-input
API counts: 19 properties, 6 methods, 1 events
Common properties: 0, 1, 2, 3, 4, 5
Common methods: close(), open(), getFormattedValue(), getValue(), select(), setValue()
Common events: change
Module hint: smart-webcomponents/source/modules/smart.timeinput.js
TimeInput specifies an input field where the user can enter a time. It also has a popup with a Calendar that allows to pick a time.
Class
TimeInput
TimeInput specifies an input field where the user can enter a time. It also has a popup with a Calendar that allows to pick a time.
Selector
smart-time-input
Properties
Events
Methods
Properties
animationSpecifies the current animation mode for the component. You can retrieve the current mode or assign a new one using this property. To completely disable animations, set the property to 'none'. When set to any other supported value, the corresponding animation effects will be enabled."none" | "simple" | "advanced"
Specifies the current animation mode for the component. You can retrieve the current mode or assign a new one using this property. To completely disable animations, set the property to 'none'. When set to any other supported value, the corresponding animation effects will be enabled.
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-input animation="none"></smart-time-input>
Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-time-input');
el.animation = "simple";Read the current value:
const el = document.querySelector('smart-time-input');
const animation = el.animation;
dateTimeFormatSpecifies the format in which the time is displayed within the input field. This option accepts configuration objects compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing you to customize the presentation of hours, minutes, seconds, and related time components. By default, the time format uses a 'numeric' style for each unit, displaying time values as numbers (e.g., "14:05"). Adjust this property to use other available formatting options, such as '2-digit', or to include additional components as needed. object
Specifies the format in which the time is displayed within the input field. This option accepts configuration objects compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing you to customize the presentation of hours, minutes, seconds, and related time components. By default, the time format uses a 'numeric' style for each unit, displaying time values as numbers (e.g., "14:05"). Adjust this property to use other available formatting options, such as '2-digit', or to include additional components as needed.
Default value
nullExamples
Markup and runtime examples for dateTimeFormat:
HTML:
<smart-time-input date-time-format="{ hour: '2-digit', minute: '2-digit' }"></smart-time-input>Vanilla JS — prefer #id if multiple widgets exist on the page:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat = { hour: 'numeric', minute: 'numeric' };Read the current value:
const el = document.querySelector('smart-time-input');
const dateTimeFormat = el.dateTimeFormat;
dateTimeFormat
hourHour format."numeric" | "2-digit"
Hour format.
Default value
"2-digit"minuteMinute format."numeric" | "2-digit"
Minute format.
Default value
"2-digit"disabledControls whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its disabled state.boolean
Controls whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically appears visually distinct (e.g., grayed out) to indicate its disabled state.
Default value
falseExamples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.disabled = false;Read the nested value:
const el = document.querySelector('smart-time-input');
const disabled = el.dateTimeFormat.disabled;
dropDownButtonPositionSpecifies the alignment and placement of the dropdown button relative to its parent element, allowing you to control whether the button appears to the left, right, center, top, or bottom of its container."none" | "left" | "right"
Specifies the alignment and placement of the dropdown button relative to its parent element, allowing you to control whether the button appears to the left, right, center, top, or bottom of its container.
Allowed Values
- "none" - The drop down button is hidden and the element acts as a simple input.
- "left" - A drop down button is displayed on the left side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
- "right" - A drop down button is displayed on the right side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
Default value
"right"Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.dropDownButtonPosition = "right";Read the nested value:
const el = document.querySelector('smart-time-input');
const dropDownButtonPosition = el.dateTimeFormat.dropDownButtonPosition;
dropDownHeightSpecifies the height of the dropdown menu. By default, the height is set to 'auto', allowing the dropdown to adjust automatically based on its content. You can set a specific height (in pixels, ems, etc.) to control the maximum visible area of the dropdown; when the content exceeds this height, a scrollbar will appear.string | number
Specifies the height of the dropdown menu. By default, the height is set to 'auto', allowing the dropdown to adjust automatically based on its content. You can set a specific height (in pixels, ems, etc.) to control the maximum visible area of the dropdown; when the content exceeds this height, a scrollbar will appear.
Default value
autoExamples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.dropDownHeight = 500;Read the nested value:
const el = document.querySelector('smart-time-input');
const dropDownHeight = el.dateTimeFormat.dropDownHeight;
dropDownWidthSpecifies the width of the dropdown menu. By default, this value is an empty string, which means the dropdown’s width will be determined by a CSS variable (e.g., --dropdown-width). You can override the default behavior by explicitly setting a width value (such as '200px', '50%', etc.), which will directly apply that width to the dropdown. If left unset, ensure that the related CSS variable is defined to control the dropdown’s appearance.string | number
Specifies the width of the dropdown menu. By default, this value is an empty string, which means the dropdown’s width will be determined by a CSS variable (e.g., --dropdown-width). You can override the default behavior by explicitly setting a width value (such as '200px', '50%', etc.), which will directly apply that width to the dropdown. If left unset, ensure that the related CSS variable is defined to control the dropdown’s appearance.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.dropDownWidth = 500;Read the nested value:
const el = document.querySelector('smart-time-input');
const dropDownWidth = el.dateTimeFormat.dropDownWidth;
inputPurposeDefines the intended purpose of the input field and specifies the level of permission granted to the browser or user agent to automatically assist users in completing the input, particularly within form contexts. This attribute provides guidance to browsers about the type of data expected—for example, whether the field should contain a user's name, address, or other personal information—thus enabling features like autofill. The value of this property aligns with the standard HTML autocomplete attribute and accepts specific keywords such as 'on', 'off', 'name', 'organization', 'street-address', and others, to control the autofill behavior for each input element.string
Defines the intended purpose of the input field and specifies the level of permission granted to the browser or user agent to automatically assist users in completing the input, particularly within form contexts. This attribute provides guidance to browsers about the type of data expected—for example, whether the field should contain a user's name, address, or other personal information—thus enabling features like autofill. The value of this property aligns with the standard HTML autocomplete attribute and accepts specific keywords such as 'on', 'off', 'name', 'organization', 'street-address', and others, to control the autofill behavior for each input element.
Default value
"off"Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.inputPurpose = "country";Read the nested value:
const el = document.querySelector('smart-time-input');
const inputPurpose = el.dateTimeFormat.inputPurpose;
localeDefines or retrieves the current language setting, typically represented as a locale code (e.g., "en", "fr"). This setting determines which set of localized strings from the messages property will be used for display. Use this property to switch or detect the language context within your application.string
Defines or retrieves the current language setting, typically represented as a locale code (e.g., "en", "fr"). This setting determines which set of localized strings from the messages property will be used for display. Use this property to switch or detect the language context within your application.
Default value
"en"Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.locale = "en";Read the nested value:
const el = document.querySelector('smart-time-input');
const locale = el.dateTimeFormat.locale;
localizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module before they are delivered to the application. Use this to modify, enhance, or reformat localized messages based on your specific requirements.function
A callback function that allows you to customize the formatting of messages returned by the Localization Module before they are delivered to the application. Use this to modify, enhance, or reformat localized messages based on your specific requirements.
Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";Read the nested value:
const el = document.querySelector('smart-time-input');
const localizeFormatFunction = el.dateTimeFormat.localizeFormatFunction;
messagesSpecifies or retrieves an object containing the widget’s display strings, allowing for easy customization and localization of text within the widget. This property is typically used together with the locale property to provide translations and adapt text content to different languages and regions.object
Specifies or retrieves an object containing the widget’s display strings, allowing for easy customization and localization of text within the widget. This property is typically used together with the locale property to provide translations and adapt text content to different languages and regions.
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.",
"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."
}
Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.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.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};Read the nested value:
const el = document.querySelector('smart-time-input');
const messages = el.dateTimeFormat.messages;
nameSets or retrieves the value of the element's name attribute. This attribute specifies the name used to identify the element’s data when an HTML form is submitted, allowing its value to be included in the form data sent to the server.string
Sets or retrieves the value of the element's name attribute. This attribute specifies the name used to identify the element’s data when an HTML form is submitted, allowing its value to be included in the form data sent to the server.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.name = "dropDown2";Read the nested value:
const el = document.querySelector('smart-time-input');
const name = el.dateTimeFormat.name;
openedIndicates whether the dropdown menu is currently open and visible to the user. If set to true, the dropdown will be displayed; if false, it will remain closed.boolean
Indicates whether the dropdown menu is currently open and visible to the user. If set to true, the dropdown will be displayed; if false, it will remain closed.
Default value
falseExamples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.opened = false;Read the nested value:
const el = document.querySelector('smart-time-input');
const opened = el.dateTimeFormat.opened;
placeholderSpecifies the placeholder text that appears inside the input field when it is empty, providing users with a hint or example of the expected input format or content.string
Specifies the placeholder text that appears inside the input field when it is empty, providing users with a hint or example of the expected input format or content.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.placeholder = "Enter:";Read the nested value:
const el = document.querySelector('smart-time-input');
const placeholder = el.dateTimeFormat.placeholder;
readonlySpecifies whether the user can manually enter text into the input field. When dropDownButtonPosition is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the component's behavior: - If readonly is false, the element functions as a ComboBox, allowing users to type and select suggestions from the data source.- If readonly is true, the element behaves as a DropDownList, restricting user input to only the options available in the data source and preventing manual text entry.boolean
Specifies whether the user can manually enter text into the input field. When dropDownButtonPosition is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the component's behavior:
- If readonly is false, the element functions as a ComboBox, allowing users to type and select suggestions from the data source.
- If readonly is true, the element behaves as a DropDownList, restricting user input to only the options available in the data source and preventing manual text entry.
Default value
falseExamples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.readonly = false;Read the nested value:
const el = document.querySelector('smart-time-input');
const readonly = el.dateTimeFormat.readonly;
rightToLeftControls or retrieves whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts (such as Arabic or Hebrew).boolean
Controls or retrieves whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts (such as Arabic or Hebrew).
Default value
falseExamples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.rightToLeft = true;Read the nested value:
const el = document.querySelector('smart-time-input');
const rightToLeft = el.dateTimeFormat.rightToLeft;
themeSpecifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the component or application.string
Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the component or application.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.theme = "red";Read the nested value:
const el = document.querySelector('smart-time-input');
const theme = el.dateTimeFormat.theme;
unfocusableWhen set to true, the element will be excluded from the page’s tab order, making it unfocusable using keyboard navigation or script-based focus commands. This prevents users from moving focus to the element using the Tab key or programmatically via JavaScript (e.g., element.focus()).boolean
When set to true, the element will be excluded from the page’s tab order, making it unfocusable using keyboard navigation or script-based focus commands. This prevents users from moving focus to the element using the Tab key or programmatically via JavaScript (e.g., element.focus()).
Default value
falseExamples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.unfocusable = false;Read the nested value:
const el = document.querySelector('smart-time-input');
const unfocusable = el.dateTimeFormat.unfocusable;
unlockKeyDefines or retrieves the unlockKey, a unique identifier required to unlock and access the product's features or content.string
Defines or retrieves the unlockKey, a unique identifier required to unlock and access the product's features or content.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.unlockKey = "1111-2222-3333-4444-5555";Read the nested value:
const el = document.querySelector('smart-time-input');
const unlockKey = el.dateTimeFormat.unlockKey;
valueSets a new value for the element or retrieves the current value of the element, depending on how the method is used. This allows you to either update the element's state or access its existing data programmatically.any
Sets a new value for the element or retrieves the current value of the element, depending on how the method is used. This allows you to either update the element's state or access its existing data programmatically.
Default value
""Examples
Set a nested field on the element:
const el = document.querySelector('smart-time-input');
el.dateTimeFormat.value = "16:30";Read the nested value:
const el = document.querySelector('smart-time-input');
const value = el.dateTimeFormat.value;
Events
changeThis event is triggered whenever the user changes the current selection, such as highlighting a different portion of text or selecting a new item within a selectable list. It fires each time the selection changes, allowing you to respond to user interactions like selecting, deselecting, or modifying the active selection.CustomEvent
This event is triggered whenever the user changes the current selection, such as highlighting a different portion of text or selecting a new item within a selectable list. It fires each time the selection changes, allowing you to respond to user interactions like selecting, deselecting, or modifying the active selection.
- Bubbles Yes
- Cancelable No
- Interface CustomEvent
- Event handler property onChange
Arguments
evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected item.
ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected item.
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.
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-input')?.addEventListener('change', (event) => {
const detail = event.detail,
label = detail.label,
oldLabel = detail.oldLabel,
oldValue = detail.oldValue,
value = detail.value;
// event handling code goes here.
})
Methods
close(): voidCloses the dropdown menu, hiding its list of selectable options and returning the interface to its collapsed state.
Closes the dropdown menu, hiding its list of selectable options and returning the interface to its collapsed state.
On the custom element in the DOM (narrow the selector, e.g. to #my-timeinput, if you host multiple widgets):
document.querySelector('smart-time-input')?.close();
Try a demo showcasing the close method.
getFormattedValue(): voidReturns the value converted into the specified format, ensuring the output matches the required data type or structure as defined by the input parameters.
Returns the value converted into the specified format, ensuring the output matches the required data type or structure as defined by the input parameters.
On the custom element in the DOM (narrow the selector, e.g. to #my-timeinput, if you host multiple widgets):
document.querySelector('smart-time-input')?.getFormattedValue();
getValue(): voidReturns the current value entered or selected in the input field by the user. This value may be typed text, a number, a selected option, or any other data depending on the input type.
Returns the current value entered or selected in the input field by the user. This value may be typed text, a number, a selected option, or any other data depending on the input type.
On the custom element in the DOM (narrow the selector, e.g. to #my-timeinput, if you host multiple widgets):
document.querySelector('smart-time-input')?.getValue();
open(): voidDisplays the dropdown menu, revealing its available options to the user.
Displays the dropdown menu, revealing its available options to the user.
On the custom element in the DOM (narrow the selector, e.g. to #my-timeinput, if you host multiple widgets):
document.querySelector('smart-time-input')?.open();
Try a demo showcasing the open method.
select(): voidSelects the text within the input field. If the input is set to readonly, the element will receive focus but the text will not be selected.
Selects the text within the input field. If the input is set to readonly, the element will receive focus but the text will not be selected.
On the custom element in the DOM (narrow the selector, e.g. to #my-timeinput, if you host multiple widgets):
document.querySelector('smart-time-input')?.select();
setValue( value: any[]): voidDefines the current value of the input field. Expects an array containing exactly two numbers: the first representing the hour and the second representing the minutes (e.g., `[13, 45]` for 1:45 PM).
Defines the current value of the input field. Expects an array containing exactly two numbers: the first representing the hour and the second representing the minutes (e.g., `[13, 45]` for 1:45 PM).
Arguments
valueany[]
The value to be set.
On the custom element in the DOM (narrow the selector, e.g. to #my-timeinput, if you host multiple widgets):
document.querySelector('smart-time-input')?.setValue();