DateRangeInput JAVASCRIPT UI Component API

DateRangeInput Javascript API

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

Properties

Events

Methods

Properties

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

Example

Set the animation property.

 <smart-date-range-input animation='none'></smart-date-range-input>

Set the animation property by using the HTML Element's instance.

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

 daterangeinput.animation = 'simple';

Get the animation property.

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

 let animation = daterangeinput.animation;

dateFormatobject

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

dateFormat

day"numeric" | "2-digit"

Day format.

Default value

"numeric"

month"numeric" | "2-digit" | "narrow" | "short" | "long"

Month format.

Default value

"numeric"

year"numeric" | "2-digit"

Year format.

Default value

"numeric"

Example

Set the dateFormat property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.dateFormat = { day: '2-digit', month: 'short' };

Get the dateFormat property.

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

 let dateFormat = daterangeinput.dateFormat.dateFormat;

disabledboolean

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

Try a demo showcasing the disabled property.

Example

Set the disabled property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.disabled = false;

Get the disabled property.

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

 let disabled = daterangeinput.dateFormat.disabled;

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

Try a demo showcasing the dropDownButtonPosition property.

Example

Set the dropDownButtonPosition property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.dropDownButtonPosition = 'left';

Get the dropDownButtonPosition property.

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

 let dropDownButtonPosition = daterangeinput.dateFormat.dropDownButtonPosition;

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

Example

Set the dropDownHeight property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.dropDownHeight = 500;

Get the dropDownHeight property.

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

 let dropDownHeight = daterangeinput.dateFormat.dropDownHeight;

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

Example

Set the dropDownWidth property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.dropDownWidth = 500;

Get the dropDownWidth property.

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

 let dropDownWidth = daterangeinput.dateFormat.dropDownWidth;

iconsboolean

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

Example

Set the icons property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.icons = false;

Get the icons property.

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

 let icons = daterangeinput.dateFormat.icons;

inputPurposestring

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"

Example

Set the inputPurpose property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.inputPurpose = 'country';

Get the inputPurpose property.

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

 let inputPurpose = daterangeinput.dateFormat.inputPurpose;

unlockKeystring

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

Example

Set the unlockKey property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

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

 let unlockKey = daterangeinput.dateFormat.unlockKey;

localestring

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"

Example

Set the locale property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.locale = 'en';

Get the locale property.

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

 let locale = daterangeinput.dateFormat.locale;

localizeFormatFunctionfunction

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.

Example

Set the localizeFormatFunction property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = daterangeinput.dateFormat.localizeFormatFunction;

maxany

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)

Example

Set the max property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.max = new Date(2025, 0, 1);

Get the max property.

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

 let max = daterangeinput.dateFormat.max;

messagesobject

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

}

Example

Set the messages property by using the HTML Element's instance.

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

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

Get the messages property.

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

 let messages = daterangeinput.dateFormat.messages;

minany

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)

Example

Set the min property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.min = new Date(2000, 1, 2);

Get the min property.

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

 let min = daterangeinput.dateFormat.min;

monthsnumber

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

Example

Set the months property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.months = 3;

Get the months property.

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

 let months = daterangeinput.dateFormat.months;

namestring

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

Example

Set the name property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.name = 'dropDown2';

Get the name property.

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

 let name = daterangeinput.dateFormat.name;

openedboolean

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

Example

Set the opened property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.opened = false;

Get the opened property.

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

 let opened = daterangeinput.dateFormat.opened;

placeholderstring

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

Try a demo showcasing the placeholder property.

Example

Set the placeholder property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.placeholder = 'Enter:';

Get the placeholder property.

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

 let placeholder = daterangeinput.dateFormat.placeholder;

readonlyboolean

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

Try a demo showcasing the readonly property.

Example

Set the readonly property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.readonly = false;

Get the readonly property.

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

 let readonly = daterangeinput.dateFormat.readonly;

rightToLeftboolean

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

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = daterangeinput.dateFormat.rightToLeft;

separatorstring

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

" - "

Example

Set the separator property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.separator = ' | ';

Get the separator property.

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

 let separator = daterangeinput.dateFormat.separator;

timeFormatobject

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

hour"numeric" | "2-digit"

Hour format.

Default value

"2-digit"

Get the hour property.

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

 let hour = daterangeinput.dateFormat.hour;

minute"numeric" | "2-digit"

Minute format.

Default value

"2-digit"

Get the minute property.

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

 let minute = daterangeinput.dateFormat.minute;

Example

Set the timeFormat property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.timeFormat.timeFormat = { hour: '2-digit', minute: '2-digit' };

Get the timeFormat property.

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

 let timeFormat = daterangeinput.dateFormat.timeFormat.timeFormat;

timepickerboolean

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

Example

Set the timepicker property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.timeFormat.timepicker = false;

Get the timepicker property.

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

 let timepicker = daterangeinput.dateFormat.timeFormat.timepicker;

themestring

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

Example

Set the theme property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.timeFormat.theme = 'red';

Get the theme property.

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

 let theme = daterangeinput.dateFormat.timeFormat.theme;

unfocusableboolean

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

Example

Set the unfocusable property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.timeFormat.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = daterangeinput.dateFormat.timeFormat.unfocusable;

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

Example

Set the value property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.timeFormat.value = value2;

Get the value property.

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

 let value = daterangeinput.dateFormat.timeFormat.value;

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

Example

Set the valueType property by using the HTML Element's instance.

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

 daterangeinput.dateFormat.timeFormat.valueType = 'string';

Get the valueType property.

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

 let valueType = daterangeinput.dateFormat.timeFormat.valueType;

Events

changeCustomEvent

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.

Example

Set up the event handler of change event.

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

Invoke the close method.

const daterangeinput = document.querySelector('smart-date-range-input');
daterangeinput.close();

Try a demo showcasing the close method.

open(): void

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

Invoke the open method.

const daterangeinput = document.querySelector('smart-date-range-input');
daterangeinput.open();

Try a demo showcasing the open method.

select(): void

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.

Invoke the select method.

const daterangeinput = document.querySelector('smart-date-range-input');
daterangeinput.select();