DateRangeInput — Smart UI JavaScript API

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

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

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

      el.value = { from: new Date(2026, 3, 1), to: new Date(2026, 3, 15) };
      el.dateFormat = 'dd-MMM-yy';
      el.separator = ' - ';

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

Developer Quick Reference

Component: DateRangeInput   Framework: JavaScript   Selector: smart-date-range-input

API counts: 27 properties, 3 methods, 1 events

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

Common methods: close(), open(), select()

Common events: change

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

DateRangeInput specifies an input field where the user can enter a date range ( from date - to date ). It also has a popup with a Calendar that allows to select a date range. Time selection is an additional feature that can be enabled which allows to specify time for the date range.

Class

DateRangeInput
dateFormat

DateRangeInput

DateRangeInput specifies an input field where the user can enter a date range ( from date - to date ). It also has a popup with a Calendar that allows to select a date range. Time selection is an additional feature that can be enabled which allows to specify time for the date range.

Selector

smart-date-range-input

Quick picks

changecloseopen

Properties

AanimationSets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled, resulting in immediate visual changes without any transition effects. For other values, the corresponding animation style will be applied during state changes.
DdateFormatSpecifies the format used to display dates within the input field. This property accepts any valid date formatting options supported by the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing for customized date representations based on user needs. By default, the date format adapts to the value provided in the 'locale' property, ensuring localization and regional date standards are respected. Under the hood, JavaScript's Intl.DateTimeFormat is utilized to generate the formatted date strings according to the specified format and locale settings. Click for more details. Property object's options:
  • day:string - Day format.
  • month:string - Month format.
  • year:string - Year format.
DdayDay format.
MmonthMonth format.
YyearYear format.
dateFormat.disabled
dateFormat.dropDownButtonPosition
dateFormat.dropDownHeight
dateFormat.dropDownWidth
dateFormat.icons
dateFormat.inputPurpose
dateFormat.locale
dateFormat.localizeFormatFunction
dateFormat.max
dateFormat.messages
dateFormat.min
dateFormat.months
dateFormat.name
dateFormat.opened
dateFormat.placeholder
dateFormat.readonly
dateFormat.rightToLeft
dateFormat.separator
dateFormat.theme
dateFormat.timeFormat
dateFormat.hour
dateFormat.minute
dateFormat.timeFormat.timepicker
dateFormat.timeFormat.unfocusable
dateFormat.timeFormat.unlockKey
dateFormat.timeFormat.value
dateFormat.timeFormat.valueType

Events

CchangeThis event is triggered whenever the user modifies the current selection, such as by selecting or deselecting text, items, or options within the interface. It fires each time the selection state changes, enabling developers to respond dynamically to user interactions.

Methods

CcloseCloses the dropdown menu by hiding all its options and returning the dropdown to its inactive state. This action ensures that no items are displayed and any selection process is canceled or finalized, depending on the current workflow.
OopenDisplays the dropdown menu, allowing users to view and select available options.
SselectSelects the text within the input field. If the input is set to readonly, the element will be focused instead, but the text will not be selected.

Properties

animationSets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled, resulting in immediate visual changes without any transition effects. For other values, the corresponding animation style will be applied during state changes."none" | "simple" | "advanced"

Sets or retrieves the animation mode for the component. When this property is set to 'none', all animations are disabled, resulting in immediate visual changes without any transition effects. For other values, the corresponding animation style will be applied during state changes.

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-date-range-input animation="none"></smart-date-range-input>

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

const el = document.querySelector('smart-date-range-input');
el.animation = "simple";

Read the current value:

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

dateFormatSpecifies the format used to display dates within the input field. This property accepts any valid date formatting options supported by the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing for customized date representations based on user needs. By default, the date format adapts to the value provided in the 'locale' property, ensuring localization and regional date standards are respected. Under the hood, JavaScript's Intl.DateTimeFormat is utilized to generate the formatted date strings according to the specified format and locale settings. Click for more details. Property object's options:
     object

    Specifies the format used to display dates within the input field. This property accepts any valid date formatting options supported by the ECMAScript Internationalization API (Intl.DateTimeFormat), allowing for customized date representations based on user needs. By default, the date format adapts to the value provided in the 'locale' property, ensuring localization and regional date standards are respected. Under the hood, JavaScript's Intl.DateTimeFormat is utilized to generate the formatted date strings according to the specified format and locale settings.

    Default value

    null

    Properties

    dayDay format.
    monthMonth format.
    yearYear format.

    Examples

    Markup and runtime examples for dateFormat:

    HTML:

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

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

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

    Read the current value:

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

    dateFormat

    dayDay format."numeric" | "2-digit"

    Day format.

    Default value

    "numeric"

    monthMonth format."numeric" | "2-digit" | "narrow" | "short" | "long"

    Month format.

    Default value

    "numeric"

    yearYear format."numeric" | "2-digit"

    Year format.

    Default value

    "numeric"

    disabledDetermines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to events. When disabled, the element appears visually distinct (usually grayed out) and does not respond to user actions such as clicks or keyboard input.boolean

    Determines whether the element is interactive or inactive. When enabled, the element can receive user input and respond to events. When disabled, the element appears visually distinct (usually grayed out) and does not respond to user actions such as clicks or keyboard input.

    Default value

    false

    Back to root property: dateFormat

    Try a demo showcasing the disabled property.

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    dropDownButtonPositionSpecifies the alignment and placement of the dropdown button relative to its parent element. This property controls whether the dropdown button appears to the left, right, above, or below its associated component."none" | "left" | "right"

    Specifies the alignment and placement of the dropdown button relative to its parent element. This property controls whether the dropdown button appears to the left, right, above, or below its associated component.

    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"

    Back to root property: dateFormat

    Try a demo showcasing the dropDownButtonPosition property.

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    dropDownHeightSpecifies the height of the dropdown menu. By default, this value is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. If a specific height is provided, it will override the CSS variable and explicitly set the dropdown’s height.string | number

    Specifies the height of the dropdown menu. By default, this value is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. If a specific height is provided, it will override the CSS variable and explicitly set the dropdown’s height.

    Default value

    ""

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    dropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string, meaning the dropdown's width will be determined by the associated CSS variable rather than a fixed value. You can override this behavior by explicitly setting a width value (e.g., '200px', '50%'), which will apply directly to the dropdown element. If left unset, ensure that the relevant CSS variable is defined to control 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, meaning the dropdown's width will be determined by the associated CSS variable rather than a fixed value. You can override this behavior by explicitly setting a width value (e.g., '200px', '50%'), which will apply directly to the dropdown element. If left unset, ensure that the relevant CSS variable is defined to control the dropdown's width as needed.

    Default value

    ""

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    iconsControls the visibility of the 'Today' and 'Clear' icons in the user interface. Set this option to display or hide these icons, allowing users to quickly select the current date or clear their selection.boolean

    Controls the visibility of the 'Today' and 'Clear' icons in the user interface. Set this option to display or hide these icons, allowing users to quickly select the current date or clear their selection.

    Default value

    false

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.icons = false;

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const icons = el.dateFormat.icons;

    inputPurposeSpecifies the autocomplete attribute for the input element, which informs the browser and user agents about the expected type of data to be entered. This attribute helps determine whether and how the browser may offer autocomplete suggestions or automatically fill in the input based on previously entered information. Setting this value provides guidance on the input’s purpose—such as 'on' (enable autocomplete), 'name' (person’s full name), 'organization' (company or organization name), 'street-address' (street address), and other standardized options—improving user experience and data accuracy in forms.string

    Specifies the autocomplete attribute for the input element, which informs the browser and user agents about the expected type of data to be entered. This attribute helps determine whether and how the browser may offer autocomplete suggestions or automatically fill in the input based on previously entered information. Setting this value provides guidance on the input’s purpose—such as 'on' (enable autocomplete), 'name' (person’s full name), 'organization' (company or organization name), 'street-address' (street address), and other standardized options—improving user experience and data accuracy in forms.

    Default value

    "off"

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    localeSpecifies or retrieves the current language setting. This property works together with the messages property to display content in the selected language. When the language is set, the appropriate localized messages from the messages object are used.string

    Specifies or retrieves the current language setting. This property works together with the messages property to display content in the selected language. When the language is set, the appropriate localized messages from the messages object are used.

    Default value

    "en"

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    localizeFormatFunctionA callback function that allows you to define a custom formatting logic for messages returned by the Localization Module. Use this to modify or enhance how localized messages are structured or displayed before they are delivered to the application.function

    A callback function that allows you to define a custom formatting logic for messages returned by the Localization Module. Use this to modify or enhance how localized messages are structured or displayed before they are delivered to the application.

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    maxSpecifies the latest selectable date that can be displayed on the calendar within the popup. Users will not be able to select any date beyond this maximum limit.any

    Specifies the latest selectable date that can be displayed on the calendar within the popup. Users will not be able to select any date beyond this maximum limit.

    Default value

    new Date(2100, 1, 1)

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    messagesDefines or retrieves an object containing the text strings displayed by the widget, allowing for easy localization and customization of user-facing messages, labels, and prompts. This property works together with the locale property to display content in the appropriate language for end users. Use this setting to provide translations and update UI text based on the selected locale.object

    Defines or retrieves an object containing the text strings displayed by the widget, allowing for easy localization and customization of user-facing messages, labels, and prompts. This property works together with the locale property to display content in the appropriate language for end users. Use this setting to provide translations and update UI text based on 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}}."

    }

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.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-date-range-input');
const messages = el.dateFormat.messages;

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

    Specifies the earliest selectable date in the calendar that appears 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)

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    monthsSpecifies how many calendar months are visible within the popup interface at once. Increasing this number allows users to view and select dates across multiple months simultaneously.number

    Specifies how many calendar months are visible within the popup interface at once. Increasing this number allows users to view and select dates across multiple months simultaneously.

    Default value

    1

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.months = 3;

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const months = el.dateFormat.months;

    nameSets or retrieves the value of the element's name attribute. The name attribute is important when submitting data within an HTML form, as it identifies the form field's key in the submitted data, allowing the server to process the input correctly. Assigning a unique name to each form element ensures that their values are included in the form submission and can be accessed on the server side.string

    Sets or retrieves the value of the element's name attribute. The name attribute is important when submitting data within an HTML form, as it identifies the form field's key in the submitted data, allowing the server to process the input correctly. Assigning a unique name to each form element ensures that their values are included in the form submission and can be accessed on the server side.

    Default value

    ""

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    openedSpecifies whether the dropdown menu is currently open ('true') or closed ('false'). This boolean value controls the visibility of the dropdown component on the user interface.boolean

    Specifies whether the dropdown menu is currently open ('true') or closed ('false'). This boolean value controls the visibility of the dropdown component on the user interface.

    Default value

    false

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    placeholderSpecifies the placeholder text that appears inside the input field when it is empty, providing a hint or example of the expected input value.string

    Specifies the placeholder text that appears inside the input field when it is empty, providing a hint or example of the expected input value.

    Default value

    ""

    Back to root property: dateFormat

    Try a demo showcasing the placeholder property.

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    readonlySpecifies whether the user can type text directly into the input field. When a dataSource is provided and dropDownButtonPosition is set to 'left' or 'right', setting readonly to true makes the element function as a DropDownList, allowing selection only from the provided options. Setting readonly to false enables ComboBox behavior, allowing the user to both select from the list and enter custom input.boolean

    Specifies whether the user can type text directly into the input field. When a dataSource is provided and dropDownButtonPosition is set to 'left' or 'right', setting readonly to true makes the element function as a DropDownList, allowing selection only from the provided options. Setting readonly to false enables ComboBox behavior, allowing the user to both select from the list and enter custom input.

    Default value

    false

    Back to root property: dateFormat

    Try a demo showcasing the readonly property.

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    rightToLeftGets or sets a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element will be displayed in a manner consistent with locales that require right-to-left text direction, ensuring proper layout and text alignment for RTL fonts.boolean

    Gets or sets a value that specifies whether the element's alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element will be displayed in a manner consistent with locales that require right-to-left text direction, ensuring proper layout and text alignment for RTL fonts.

    Default value

    false

    Back to root property: dateFormat

    Try a demo showcasing the rightToLeft property.

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    separatorSpecifies the character or string used to separate the start date and end date within the input field when a date range is selected. This delimiter helps clearly distinguish between the beginning and ending dates entered by the user.string

    Specifies the character or string used to separate the start date and end date within the input field when a date range is selected. This delimiter helps clearly distinguish between the beginning and ending dates entered by the user.

    Default value

    " - "

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.separator = "|";

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const separator = el.dateFormat.separator;

    themeSpecifies the visual theme applied to the element. Themes control the appearance and styling of elements, including colors, fonts, spacing, and other design attributes, ensuring a consistent look and feel across the user interface.string

    Specifies the visual theme applied to the element. Themes control the appearance and styling of elements, including colors, fonts, spacing, and other design attributes, ensuring a consistent look and feel across the user interface.

    Default value

    ""

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    timeFormatSpecifies the format in which dates are displayed within the input field. This property accepts date format options compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). If not explicitly set, the date format will automatically be determined based on the current value of the 'locale' property. Ensure the provided format object follows the valid options for Intl.DateTimeFormat to guarantee proper date rendering. object

    Specifies the format in which dates are displayed within the input field. This property accepts date format options compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). If not explicitly set, the date format will automatically be determined based on the current value of the 'locale' property. Ensure the provided format object follows the valid options for Intl.DateTimeFormat to guarantee proper date rendering.

    Default value

    null

    Properties

    hourHour format.
    minuteMinute format.

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.timeFormat = { hour: '2-digit', minute: '2-digit' };

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const timeFormat = el.dateFormat.timeFormat;

    hourHour format."numeric" | "2-digit"

    Hour format.

    Default value

    "2-digit"

    Back to root property: dateFormat

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const hour = el.dateFormat.hour;

    minuteMinute format."numeric" | "2-digit"

    Minute format.

    Default value

    "2-digit"

    Back to root property: dateFormat

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const minute = el.dateFormat.minute;

    timepickerSpecifies whether users can select a time value in addition to a date. When enabled, a time picker will be displayed, allowing users to choose both date and time; when disabled, only date selection is available.boolean

    Specifies whether users can select a time value in addition to a date. When enabled, a time picker will be displayed, allowing users to choose both date and time; when disabled, only date selection is available.

    Default value

    false

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.timeFormat.timepicker = false;

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const timepicker = el.dateFormat.timeFormat.timepicker;

    unfocusableWhen set to true, this property prevents the element from receiving keyboard or programmatic focus. As a result, users will not be able to navigate to the element using the Tab key or other focus methods.boolean

    When set to true, this property prevents the element from receiving keyboard or programmatic focus. As a result, users will not be able to navigate to the element using the Tab key or other focus methods.

    Default value

    false

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    unlockKeyDefines or retrieves the unlockKey, a unique identifier or code required to activate or grant access to the product’s features or content.string

    Defines or retrieves the unlockKey, a unique identifier or code required to activate or grant access to the product’s features or content.

    Default value

    ""

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

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

    Read the nested value:

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

    valueGets or sets the value of the element. The data type of value is determined by the valueType property; for example, if valueType is set to "number", value will hold a numeric value, while if valueType is "string", value will contain a text string. Use this property to reliably read from or assign a new value to the element in accordance with its specified type.string | object

    Gets or sets the value of the element. The data type of value is determined by the valueType property; for example, if valueType is set to "number", value will hold a numeric value, while if valueType is "string", value will contain a text string. Use this property to reliably read from or assign a new value to the element in accordance with its specified type.

    Default value

    ""

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.timeFormat.value = "value2";

    Read the nested value:

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

    valueTypeSpecifies the data type that will be returned by the 'value' property, allowing developers to know what type of value (e.g., string, number, boolean, object) to expect when accessing this property."string" | "object"

    Specifies the data type that will be returned by the 'value' property, allowing developers to know what type of value (e.g., string, number, boolean, object) to expect when accessing this property.

    Allowed Values

    • "string" - Returns the value as a string, e.g. '01-01-2020 - 31-12-2020'.
    • "object" - Returns the value as an object which contains the start and end dates, e.g. { from: dateFrom, to: dateTo }

    Default value

    "string"

    Back to root property: dateFormat

    Examples

    Set a nested field on the element:

    const el = document.querySelector('smart-date-range-input');
el.dateFormat.timeFormat.valueType = "string";

    Read the nested value:

    const el = document.querySelector('smart-date-range-input');
const valueType = el.dateFormat.timeFormat.valueType;

    Events

    changeThis event is triggered whenever the user modifies the current selection, such as by selecting or deselecting text, items, or options within the interface. It fires each time the selection state changes, enabling developers to respond dynamically to user interactions.CustomEvent

    This event is triggered whenever the user modifies the current selection, such as by selecting or deselecting text, items, or options within the interface. It fires each time the selection state changes, enabling developers to respond dynamically to user interactions.

    • 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-range-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 by hiding all its options and returning the dropdown to its inactive state. This action ensures that no items are displayed and any selection process is canceled or finalized, depending on the current workflow.

    Closes the dropdown menu by hiding all its options and returning the dropdown to its inactive state. This action ensures that no items are displayed and any selection process is canceled or finalized, depending on the current workflow.

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

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

    Try a demo showcasing the close method.

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

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

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

    document.querySelector('smart-date-range-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 be focused instead, but the text will not be selected.

    Selects the text within the input field. If the input is set to readonly, the element will be focused instead, but the text will not be selected.

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

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