smart-html-elements

DateInput — 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>DateInput - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-date-input id="demo-dateinput"></smart-date-input>

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

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

      el.value = new Date(2026, 3, 9);
      el.dateTimeFormat = 'dd-MMM-yy';
      el.dropDownButtonPosition = 'right';

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

For AI tooling

Developer Quick Reference

Component: DateInput Framework: JavaScript Selector: smart-date-input

API counts: 24 properties, 6 methods, 1 events

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

Common methods: close(), open(), select(), getFormattedValue(), getValue(), setValue()

Common events: change

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

DateInput specifies an input field where the user can enter a date. It also has a popup with a Calendar that allows to pick a date.

Class

DateInput

DateInput specifies an input field where the user can enter a date. It also has a popup with a Calendar that allows to pick a date.

Selector

smart-date-input

Quick picks

change close disabled open value

Specifies whether the calendar button pop-up should automatically close after a user selects a date or time. If set to true, the pop-up will close immediately upon selection; if false, the pop-up will remain open, allowing multiple selections or further interaction.

Default value

false

Examples

Markup and runtime examples for autoClose:

HTML attribute:

<smart-date-input auto-close></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.autoClose = false;

Read the current value:

const el = document.querySelector('smart-date-input');
const autoClose = el.autoClose;

autoCloseDelaySpecifies the duration (in milliseconds) to wait before automatically closing the calendar pop-up after it is opened. This setting is effective only when autoClose is set to true; if autoClose is false, this option is ignored.number

Specifies the duration (in milliseconds) to wait before automatically closing the calendar pop-up after it is opened. This setting is effective only when autoClose is set to true; if autoClose is false, this option is ignored.

Default value

500

Examples

Markup and runtime examples for autoCloseDelay:

HTML:

<smart-date-input auto-close-delay="0"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.autoCloseDelay = 100;

Read the current value:

const el = document.querySelector('smart-date-input');
const autoCloseDelay = el.autoCloseDelay;

calendarPropertiesSpecifies the configuration options and properties that will be applied to the popup calendar, such as date format, selectable date range, default view, and localization settings.any

Specifies the configuration options and properties that will be applied to the popup calendar, such as date format, selectable date range, default view, and localization settings.

dateTimeFormatSpecifies the format in which dates are displayed within the input field. This property accepts a configuration object compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). You can customize the date format by providing options such as day, month, and year with values like 'numeric', '2-digit', 'long', etc. For example, { day: 'numeric', month: 'long', year: '2-digit' }. Internally, JavaScript’s Intl.DateTimeFormat is used to format the date strings according to these options. If not specified, the default format is { day: 'numeric', month: 'numeric', year: 'numeric' }, which displays dates using numeric day, month, and year values (e.g., 06/11/2024). Click for more details. Property object's options:
any

Specifies the format in which dates are displayed within the input field. This property accepts a configuration object compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). You can customize the date format by providing options such as day, month, and year with values like 'numeric', '2-digit', 'long', etc. For example, { day: 'numeric', month: 'long', year: '2-digit' }. Internally, JavaScript’s Intl.DateTimeFormat is used to format the date strings according to these options. If not specified, the default format is { day: 'numeric', month: 'numeric', year: 'numeric' }, which displays dates using numeric day, month, and year values (e.g., 06/11/2024).

The 3 property's object value may have the following properties:

day: string - Day format.
month: string - Month format.
year: string - Year format.

Default value

{ day: 'numeric', month: 'numeric', year: 'numeric' }

Examples

Markup and runtime examples for dateTimeFormat:

HTML:

<smart-date-input date-time-format="{ day: '2-digit', month: '2-digit', year: '2-digit' }"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.dateTimeFormat = { day: '2-digit', month: 'short' };

Read the current value:

const el = document.querySelector('smart-date-input');
const dateTimeFormat = el.dateTimeFormat;

disabledDetermines whether the element is enabled and interactive, or disabled and non-interactive. When set to true, the element is disabled and cannot be interacted with by the user; when set to false, the element remains enabled and fully functional.boolean

Determines whether the element is enabled and interactive, or disabled and non-interactive. When set to true, the element is disabled and cannot be interacted with by the user; when set to false, the element remains enabled and fully functional.

Default value

false

Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-date-input disabled></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-date-input');
const disabled = el.disabled;

dropDownButtonPositionSpecifies the placement of the dropdown button within its container, such as aligning it to the left, right, center, or another designated position. This setting affects where the button appears in relation to surrounding elements."none" | "left" | "right"

Specifies the placement of the dropdown button within its container, such as aligning it to the left, right, center, or another designated position. This setting affects where the button appears in relation to surrounding elements.

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"

Try a demo showcasing the dropDownButtonPosition property.

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

<smart-date-input drop-down-button-position="left"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.dropDownButtonPosition = "right";

Read the current value:

const el = document.querySelector('smart-date-input');
const dropDownButtonPosition = el.dropDownButtonPosition;

dropDownHeightSpecifies the height of the drop-down menu. By default, the height is set to 'auto', allowing the drop-down to automatically adjust its size based on its content. You can set a specific value (e.g., '200px', '50%', etc.) to limit or customize the height as needed.string | number

Specifies the height of the drop-down menu. By default, the height is set to 'auto', allowing the drop-down to automatically adjust its size based on its content. You can set a specific value (e.g., '200px', '50%', etc.) to limit or customize the height as needed.

Default value

auto

Examples

Markup and runtime examples for dropDownHeight:

HTML:

<smart-date-input drop-down-height="300"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.dropDownHeight = 500;

Read the current value:

const el = document.querySelector('smart-date-input');
const dropDownHeight = el.dropDownHeight;

dropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable. If a specific value is provided (such as "200px" or "50%"), it will override the CSS variable and explicitly set the dropdown's width to that value. Use this property to customize the dropdown’s width as needed.string | number

Specifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable. If a specific value is provided (such as "200px" or "50%"), it will override the CSS variable and explicitly set the dropdown's width to that value. Use this property to customize the dropdown’s width as needed.

Default value

Examples

Markup and runtime examples for dropDownWidth:

HTML:

<smart-date-input drop-down-width="300"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.dropDownWidth = 500;

Read the current value:

const el = document.querySelector('smart-date-input');
const dropDownWidth = el.dropDownWidth;

formatStringSets the custom date and time formatting pattern. When the 'formatString' property is set, it takes precedence over the 'dateTimeFormat' property, which will be disabled. The formatted output will strictly follow the pattern defined in 'formatString'.'Built-in Format Strings:'- ''d'': Short date pattern (e.g., 'M/d/yyyy')- ''D'': Long date pattern (e.g., 'dddd, MMMM dd, yyyy')- ''t'': Short time pattern (e.g., 'h:mm tt')- ''T'': Long time pattern (e.g., 'h:mm:ss tt')- ''f'': Long date, short time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm tt')- ''F'': Long date, long time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm:ss tt')- ''M'': Month/day pattern (e.g., 'MMMM dd')- ''Y'': Year/month pattern (e.g., 'yyyy MMMM')- ''S'': Sortable date/time pattern, culture-invariant (e.g., 'yyyy-MM-ddTHH:mm:ss')'Custom Format String Components:'- ''d'': Day of month (1–31)- ''dd'': Day of month, two digits (01–31)- ''ddd'': Abbreviated day name (e.g., Mon, Tue)- ''dddd'': Full day name (e.g., Monday, Tuesday)- ''h'': Hour (12-hour clock, 1–12)- ''hh'': Hour (12-hour clock, two digits, 01–12)- ''H'': Hour (24-hour clock, 0–23)- ''HH'': Hour (24-hour clock, two digits, 00–23)- ''m'': Minute (0–59)- ''mm'': Minute, two digits (00–59)- ''M'': Month (1–12)- ''MM'': Month, two digits (01–12)- ''MMM'': Abbreviated month name (e.g., Jan, Feb)- ''MMMM'': Full month name (e.g., January, February)- ''s'': Second (0–59)- ''ss'': Second, two digits (00–59)- ''t'': First character of the AM/PM designator (A or P)- ''tt'': AM/PM designator- ''y'': Year, last one or two digits (e.g., 0–99)- ''yy'': Year, last two digits (00–99)- ''yyy'': Year, minimum three digits- ''yyyy'': Year, four digits (e.g., 2024)- ''yyyyy'': Year, minimum five digits (pads with leading zeros if necessary)'Note:' Use these format specifiers to customize how dates and times are displayed in your application. If you assign a value to 'formatString', make sure to use the correct pattern for your intended output. When this property is active, 'dateTimeFormat' settings are ignored.string

Sets the custom date and time formatting pattern. When the 'formatString' property is set, it takes precedence over the 'dateTimeFormat' property, which will be disabled. The formatted output will strictly follow the pattern defined in 'formatString'.

'Built-in Format Strings:'

- ''d'': Short date pattern (e.g., 'M/d/yyyy')
- ''D'': Long date pattern (e.g., 'dddd, MMMM dd, yyyy')
- ''t'': Short time pattern (e.g., 'h:mm tt')
- ''T'': Long time pattern (e.g., 'h:mm:ss tt')
- ''f'': Long date, short time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm tt')
- ''F'': Long date, long time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm:ss tt')
- ''M'': Month/day pattern (e.g., 'MMMM dd')
- ''Y'': Year/month pattern (e.g., 'yyyy MMMM')
- ''S'': Sortable date/time pattern, culture-invariant (e.g., 'yyyy-MM-ddTHH:mm:ss')

'Custom Format String Components:'

- ''d'': Day of month (1–31)
- ''dd'': Day of month, two digits (01–31)
- ''ddd'': Abbreviated day name (e.g., Mon, Tue)
- ''dddd'': Full day name (e.g., Monday, Tuesday)
- ''h'': Hour (12-hour clock, 1–12)
- ''hh'': Hour (12-hour clock, two digits, 01–12)
- ''H'': Hour (24-hour clock, 0–23)
- ''HH'': Hour (24-hour clock, two digits, 00–23)
- ''m'': Minute (0–59)
- ''mm'': Minute, two digits (00–59)
- ''M'': Month (1–12)
- ''MM'': Month, two digits (01–12)
- ''MMM'': Abbreviated month name (e.g., Jan, Feb)
- ''MMMM'': Full month name (e.g., January, February)
- ''s'': Second (0–59)
- ''ss'': Second, two digits (00–59)
- ''t'': First character of the AM/PM designator (A or P)
- ''tt'': AM/PM designator
- ''y'': Year, last one or two digits (e.g., 0–99)
- ''yy'': Year, last two digits (00–99)
- ''yyy'': Year, minimum three digits
- ''yyyy'': Year, four digits (e.g., 2024)
- ''yyyyy'': Year, minimum five digits (pads with leading zeros if necessary)

'Note:'
Use these format specifiers to customize how dates and times are displayed in your application. If you assign a value to 'formatString', make sure to use the correct pattern for your intended output. When this property is active, 'dateTimeFormat' settings are ignored.

Default value

Examples

Markup and runtime examples for formatString:

HTML:

<smart-date-input format-string="dd/MM/yyyy"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.formatString = "yyyy-MM-dd";

Read the current value:

const el = document.querySelector('smart-date-input');
const formatString = el.formatString;

inputPurposeDefines the expected type of input data for the form element and specifies whether, and to what extent, the browser or user agent is allowed to provide automated autofill assistance. This value directly corresponds to the standard HTML autocomplete attribute and guides browsers in offering suggestions to the user, improving form completion speed and accuracy. Possible values include generic options such as 'on' or 'off', as well as more specific values describing the kind of information expected—such as 'name', 'email', 'organization', 'street-address', and others. Setting this attribute helps enhance both user experience and data accuracy by allowing browsers to match the input field with saved user data.string

Defines the expected type of input data for the form element and specifies whether, and to what extent, the browser or user agent is allowed to provide automated autofill assistance. This value directly corresponds to the standard HTML autocomplete attribute and guides browsers in offering suggestions to the user, improving form completion speed and accuracy. Possible values include generic options such as 'on' or 'off', as well as more specific values describing the kind of information expected—such as 'name', 'email', 'organization', 'street-address', and others. Setting this attribute helps enhance both user experience and data accuracy by allowing browsers to match the input field with saved user data.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

<smart-date-input input-purpose="on"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.inputPurpose = "country";

Read the current value:

const el = document.querySelector('smart-date-input');
const inputPurpose = el.inputPurpose;

localeSpecifies or retrieves the current language setting. This property determines which language is used when displaying messages, in coordination with the messages property that holds localized message strings for different languages. Adjusting this property updates the displayed messages to match the selected language.string

Specifies or retrieves the current language setting. This property determines which language is used when displaying messages, in coordination with the messages property that holds localized message strings for different languages. Adjusting this property updates the displayed messages to match the selected language.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-date-input locale="de"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.locale = "en";

Read the current value:

const el = document.querySelector('smart-date-input');
const locale = el.locale;

localizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify or enhance the appearance, structure, or content of localization messages before they are rendered to the user.function

A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify or enhance the appearance, structure, or content of localization messages before they are rendered to the user.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

const el = document.querySelector('smart-date-input');
const localizeFormatFunction = el.localizeFormatFunction;

maxSpecifies the latest selectable date that can be displayed in the popup's Calendar. Dates beyond this value will be disabled and cannot be selected by the user.any

Specifies the latest selectable date that can be displayed in the popup's Calendar. Dates beyond this value will be disabled and cannot be selected by the user.

Default value

new Date(2100, 1, 1)

Examples

Markup and runtime examples for max:

HTML:

<smart-date-input max="2100, 1, 2"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.max = "new Date(2025, 0, 1)";

Read the current value:

const el = document.querySelector('smart-date-input');
const max = el.max;

messagesDefines or retrieves an object containing the set of user-facing strings displayed by the widget, allowing them to be customized for different languages. This property works in conjunction with the locale property to support localization and internationalization of the widget interface. By providing translated strings in this object, you can ensure that all text elements within the widget match the selected locale.object

Defines or retrieves an object containing the set of user-facing strings displayed by the widget, allowing them to be customized for different languages. This property works in conjunction with the locale property to support localization and internationalization of the widget interface. By providing translated strings in this object, you can ensure that all text elements within the widget match the selected locale.

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

Markup and runtime examples for messages:

HTML:

<smart-date-input 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.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
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.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Read the current value:

const el = document.querySelector('smart-date-input');
const messages = el.messages;

minSpecifies the earliest selectable date that can be shown in the Calendar component within the popup. Dates prior to this value will be disabled and cannot be selected by the user.any

Specifies the earliest selectable date that can be shown in the Calendar component within the popup. Dates prior to this value will be disabled and cannot be selected by the user.

Default value

new Date(1900, 1, 1)

Examples

Markup and runtime examples for min:

HTML:

<smart-date-input min="1900, 1, 2"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.min = "new Date(2000, 1, 2)";

Read the current value:

const el = document.querySelector('smart-date-input');
const min = el.min;

nameEnhances or retrieves the value of the 'name' attribute for the element. The 'name' attribute assigns a unique identifier to the element, which is essential when submitting form data. During form submission, the value of the element is sent to the server associated with this 'name', allowing the server to correctly process and recognize each field of the form.string

Enhances or retrieves the value of the 'name' attribute for the element. The 'name' attribute assigns a unique identifier to the element, which is essential when submitting form data. During form submission, the value of the element is sent to the server associated with this 'name', allowing the server to correctly process and recognize each field of the form.

Default value

Examples

Markup and runtime examples for name:

HTML:

<smart-date-input name="dropdown"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.name = "dropDown2";

Read the current value:

const el = document.querySelector('smart-date-input');
const name = el.name;

openedSpecifies whether the dropdown menu is currently open (visible to the user) or closed (hidden from view).boolean

Specifies whether the dropdown menu is currently open (visible to the user) or closed (hidden from view).

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-date-input opened></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.opened = false;

Read the current value:

const el = document.querySelector('smart-date-input');
const opened = el.opened;

placeholderSpecifies the placeholder text that appears inside the input field before the user enters a value. This text provides guidance or an example of the expected input format.string

Specifies the placeholder text that appears inside the input field before the user enters a value. This text provides guidance or an example of the expected input format.

Default value

Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-date-input placeholder="Empty"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.placeholder = "Enter:";

Read the current value:

const el = document.querySelector('smart-date-input');
const placeholder = el.placeholder;

readonlyDetermines whether the user can enter or edit text in the input field. When the dropDownButtonPosition property is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the input's behavior: - If readonly is `false`, the element functions as a ComboBox, allowing users to type custom values in addition to selecting from the drop-down list. - If readonly is `true`, the element functions as a DropDownList, restricting user input to selections from the provided list only; manual text entry is disabled.boolean

Determines whether the user can enter or edit text in the input field. When the dropDownButtonPosition property is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the input's behavior:
- If readonly is false, the element functions as a ComboBox, allowing users to type custom values in addition to selecting from the drop-down list.
- If readonly is true, the element functions as a DropDownList, restricting user input to selections from the provided list only; manual text entry is disabled.

Default value

false

Try a demo showcasing the readonly property.

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-date-input readonly></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-date-input');
const readonly = el.readonly;

rightToLeftSets or retrieves a value that specifies whether the element’s text and layout are aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, ensuring proper display and reading order for locales that use RTL scripts.boolean

Sets or retrieves a value that specifies whether the element’s text and layout are aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, ensuring proper display and reading order for locales that use RTL scripts.

Default value

false

Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-date-input right-to-left></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-date-input');
const rightToLeft = el.rightToLeft;

themeSpecifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element.string

Specifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element.

Default value

Examples

Markup and runtime examples for theme:

HTML:

<smart-date-input theme="blue"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-date-input');
const theme = el.theme;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or script-based focus methods.boolean

When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or script-based focus methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-date-input unfocusable></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-date-input');
const unfocusable = el.unfocusable;

unlockKeyRetrieves or assigns the unlockKey value used to authenticate and grant access to the product. The unlockKey serves as a security credential required to unlock the product’s features or content.string

Retrieves or assigns the unlockKey value used to authenticate and grant access to the product. The unlockKey serves as a security credential required to unlock the product’s features or content.

Default value

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-date-input unlock-key=""></smart-date-input>

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

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

Read the current value:

const el = document.querySelector('smart-date-input');
const unlockKey = el.unlockKey;

valueGets or sets the value of the element. The value should be either a date string (e.g., "2024-06-01"), a JavaScript Date object, or null to indicate no value.any

Gets or sets the value of the element. The value should be either a date string (e.g., "2024-06-01"), a JavaScript Date object, or null to indicate no value.

Default value

Examples

Markup and runtime examples for value:

HTML:

<smart-date-input value="9/1/2020"></smart-date-input>

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

const el = document.querySelector('smart-date-input');
el.value = "9/15/2020";

Read the current value:

const el = document.querySelector('smart-date-input');
const value = el.value;

Events

changeThis event is triggered whenever the user changes the current selection, such as highlighting different text, selecting a new item in a list, or modifying the currently selected elements. It allows you to execute custom code in response to any change in selection within the relevant component or interface.CustomEvent

This event is triggered whenever the user changes the current selection, such as highlighting different text, selecting a new item in a list, or modifying the currently selected elements. It allows you to execute custom code in response to any change in selection within the relevant component or interface.

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-date-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 options from view and returning the dropdown component to its inactive state.

Closes the dropdown menu, hiding its options from view and returning the dropdown component to its inactive state.

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

document.querySelector('smart-date-input')?.close();

Try a demo showcasing the close method.

getFormattedValue( value: string | Date, format?: any): voidReturns the value converted to the specified format, ensuring that the output matches the required data type or structure as requested.

Returns the value converted to the specified format, ensuring that the output matches the required data type or structure as requested.

Arguments

valuestring | Date

The value to be formatted by the method.

format?any

The object that contains the formatting properties. The argument should contain Intl.DateTimeFormat valid properties.

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

document.querySelector('smart-date-input')?.getFormattedValue();

getValue(): voidReturns the date portion extracted from the provided input, which can be a date, datetime string, or timestamp. The output is formatted as a standard date (e.g., "YYYY-MM-DD"), omitting any time or timezone information present in the input.

Returns the date portion extracted from the provided input, which can be a date, datetime string, or timestamp. The output is formatted as a standard date (e.g., "YYYY-MM-DD"), omitting any time or timezone information present in the input.

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

document.querySelector('smart-date-input')?.getValue();

open(): voidDisplays and expands the dropdown menu, allowing the user to view and select available options.

Displays and expands the dropdown menu, allowing the user to view and select available options.

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

document.querySelector('smart-date-input')?.open();

Try a demo showcasing the open method.

select(): voidEnhancement:"Selects the text within the input element. If the input is marked as readonly, the element will be focused without selecting its content."

Enhancement:

"Selects the text within the input element. If the input is marked as readonly, the element will be focused without selecting its content."

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

document.querySelector('smart-date-input')?.select();

setValue( value: string | Date): voidSpecifies the date value for the input field. This determines the preselected date that appears in the date picker when the input is rendered, or programmatically sets the input's current date. The value should follow the format 'YYYY-MM-DD' to ensure compatibility across browsers.

Specifies the date value for the input field. This determines the preselected date that appears in the date picker when the input is rendered, or programmatically sets the input's current date. The value should follow the format 'YYYY-MM-DD' to ensure compatibility across browsers.

Arguments

valuestring | Date

The value to be set.

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

document.querySelector('smart-date-input')?.setValue();