TimeInput Javascript API

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

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

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

 const timeinput = document.querySelector('smart-time-input');

 timeinput.animation = 'simple';

 const timeinput = document.querySelector('smart-time-input');

 let animation = timeinput.animation;

dateTimeFormatobject

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.dateTimeFormat = { hour: 'numeric', minute: 'numeric' };

 const timeinput = document.querySelector('smart-time-input');

 let dateTimeFormat = timeinput.dateTimeFormat.dateTimeFormat;

disabledboolean

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.disabled = false;

 const timeinput = document.querySelector('smart-time-input');

 let disabled = timeinput.dateTimeFormat.disabled;

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

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.dropDownButtonPosition = 'right';

 const timeinput = document.querySelector('smart-time-input');

 let dropDownButtonPosition = timeinput.dateTimeFormat.dropDownButtonPosition;

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

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.dropDownHeight = 500;

 const timeinput = document.querySelector('smart-time-input');

 let dropDownHeight = timeinput.dateTimeFormat.dropDownHeight;

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

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.dropDownWidth = 500;

 const timeinput = document.querySelector('smart-time-input');

 let dropDownWidth = timeinput.dateTimeFormat.dropDownWidth;

inputPurposestring

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.inputPurpose = 'country';

 const timeinput = document.querySelector('smart-time-input');

 let inputPurpose = timeinput.dateTimeFormat.inputPurpose;

unlockKeystring

Defines or retrieves the unlockKey, a unique identifier required to unlock and access the product's features or content.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.unlockKey = '1111-2222-3333-4444-5555';

 const timeinput = document.querySelector('smart-time-input');

 let unlockKey = timeinput.dateTimeFormat.unlockKey;

localestring

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.locale = 'en';

 const timeinput = document.querySelector('smart-time-input');

 let locale = timeinput.dateTimeFormat.locale;

localizeFormatFunctionfunction

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.

 const timeinput = document.querySelector('smart-time-input');

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

 const timeinput = document.querySelector('smart-time-input');

 let localizeFormatFunction = timeinput.dateTimeFormat.localizeFormatFunction;

messagesobject

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.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}}."}};

 const timeinput = document.querySelector('smart-time-input');

 let messages = timeinput.dateTimeFormat.messages;

namestring

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.name = 'dropDown2';

 const timeinput = document.querySelector('smart-time-input');

 let name = timeinput.dateTimeFormat.name;

openedboolean

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.opened = false;

 const timeinput = document.querySelector('smart-time-input');

 let opened = timeinput.dateTimeFormat.opened;

placeholderstring

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.placeholder = 'Enter:';

 const timeinput = document.querySelector('smart-time-input');

 let placeholder = timeinput.dateTimeFormat.placeholder;

readonlyboolean

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.readonly = false;

 const timeinput = document.querySelector('smart-time-input');

 let readonly = timeinput.dateTimeFormat.readonly;

rightToLeftboolean

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

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.rightToLeft = true;

 const timeinput = document.querySelector('smart-time-input');

 let rightToLeft = timeinput.dateTimeFormat.rightToLeft;

themestring

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.theme = 'red';

 const timeinput = document.querySelector('smart-time-input');

 let theme = timeinput.dateTimeFormat.theme;

unfocusableboolean

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()).

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.unfocusable = false;

 const timeinput = document.querySelector('smart-time-input');

 let unfocusable = timeinput.dateTimeFormat.unfocusable;

valueany

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.

 const timeinput = document.querySelector('smart-time-input');

 timeinput.dateTimeFormat.value = 16:30;

 const timeinput = document.querySelector('smart-time-input');

 let value = timeinput.dateTimeFormat.value;

Events

changeCustomEvent

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

const timeinput = document.querySelector('smart-time-input');
timeinput.addEventListener('change', function (event) {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): void

Closes the dropdown menu, hiding its list of selectable options and returning the interface to its collapsed state.

const timeinput = document.querySelector('smart-time-input');
timeinput.close();

open(): void

Displays the dropdown menu, revealing its available options to the user.

const timeinput = document.querySelector('smart-time-input');
timeinput.open();

getFormattedValue(): void

Returns the value converted into the specified format, ensuring the output matches the required data type or structure as defined by the input parameters.

const timeinput = document.querySelector('smart-time-input');
timeinput.getFormattedValue();

getValue(): void

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.

const timeinput = document.querySelector('smart-time-input');
timeinput.getValue();

select(): void

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.

const timeinput = document.querySelector('smart-time-input');
timeinput.select();

setValue( value: any[]): void

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.

const timeinput = document.querySelector('smart-time-input');
timeinput.setValue();