DateRangeInput JAVASCRIPT UI Component API

DateRangeInput Javascript API

Class

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

Properties

Events

Methods

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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

Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. By default the date format is determined by the 'locale' property.

Default value

null

Properties

0any

Default value

null

1any

Default value

null

2any

Default value

null

3any

Default value

null

4any

Default value

null

5any

Default value

null

6any

Default value

null

7any

Default value

null

8any

Default value

null

9any

Default value

null

10any

Default value

null

11any

Default value

null

12any

Default value

null

13any

Default value

null

14any

Default value

null

15any

Default value

null

16any

Default value

null

17any

Default value

null

18any

Default value

null

19any

Default value

null

20any

Default value

null

21any

Default value

null

22any

Default value

null

23any

Default value

null

24any

Default value

null

25any

Default value

null

26any

Default value

null

27any

Default value

null

28any

Default value

null

29any

Default value

null

30any

Default value

null

31any

Default value

null

32any

Default value

null

33any

Default value

null

34any

Default value

null

35any

Default value

null

36any

Default value

null

37any

Default value

null

38any

Default value

null

39any

Default value

null

40any

Default value

null

41any

Default value

null

42any

Default value

null

43any

Default value

null

44any

Default value

null

45any

Default value

null

46any

Default value

null

47any

Default value

null

48any

Default value

null

49any

Default value

null

50any

Default value

null

51any

Default value

null

52any

Default value

null

Example

Set the dateFormat property.

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

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

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

Get the dateFormat property.

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

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

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

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

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

Get the disabled property.

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

dropDownButtonPosition"none" | "left" | "right"

Determines the position of the drop down button.

Default value

"right"

Example

Set the dropDownButtonPosition property.

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

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

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

Get the dropDownButtonPosition property.

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

dropDownHeightstring | number

Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownHeight property.

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

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

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

Get the dropDownHeight property.

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

dropDownWidthstring | number

Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownWidth property.

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

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

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

Get the dropDownWidth property.

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

iconsboolean

Determines whether the 'Today/Clear' icons will be visible or not.

Default value

false

Example

Set the icons property.

 <smart-date-range-input icons></smart-date-range-input>

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

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

Get the icons property.

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

inputPurposestring

Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.

Default value

"off"

Example

Set the inputPurpose property.

 <smart-date-range-input input-purpose='on'></smart-date-range-input>

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

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

Get the inputPurpose property.

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

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-date-range-input locale='de'></smart-date-range-input>

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

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

Get the locale property.

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

localizeFormatFunctionfunction

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

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

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

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

Get the localizeFormatFunction property.

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

maxany

Determines the max date for the Calendar displayed inside the popup.

Default value

new Date(2100, 1, 1)

Example

Set the max property.

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

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

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

Get the max property.

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

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property 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.

 <smart-date-range-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-range-input>

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

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

minany

Determines the min date for the Calendar displayed inside the popup.

Default value

new Date(1900, 1, 1)

Example

Set the min property.

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

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

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

Get the min property.

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

monthsnumber

Determines the number of months that will be displayed inside the popup.

Default value

1

Example

Set the months property.

 <smart-date-range-input months='2'></smart-date-range-input>

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

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

Get the months property.

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

namestring

Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.

Default value

""

Example

Set the name property.

 <smart-date-range-input name='dropdown'></smart-date-range-input>

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

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

Get the name property.

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

openedboolean

Determines whether the drop down is opened or not.

Default value

false

Example

Set the opened property.

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

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

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

Get the opened property.

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

placeholderstring

Determines the placeholder of the input.

Default value

""

Example

Set the placeholder property.

 <smart-date-range-input placeholder='Empty'></smart-date-range-input>

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

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

Get the placeholder property.

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

readonlyboolean

Determines whether ot not the user can enter text inside the input. if dropDownButtonPosition is set to 'left' or 'right' then readonly determines whether the element acts as a ComboBox or a DropDownList if a dataSource is provided.

Default value

false

Example

Set the readonly property.

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

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

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

Get the readonly property.

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

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Example

Set the rightToLeft property.

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

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

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

Get the rightToLeft property.

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

separatorstring

Determines the delimiter between the selected dates in the input. This delimiter is ued to distinguish the starting date from the ending date.

Default value

" - "

Example

Set the separator property.

 <smart-date-range-input separator=' -- '></smart-date-range-input>

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

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

Get the separator property.

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

timeFormatobject

Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. By default the date foramt is determined by the 'locale' property.

Default value

null

Properties

0any

Default value

null

1any

Default value

null

2any

Default value

null

3any

Default value

null

4any

Default value

null

5any

Default value

null

6any

Default value

null

7any

Default value

null

8any

Default value

null

9any

Default value

null

10any

Default value

null

11any

Default value

null

12any

Default value

null

13any

Default value

null

14any

Default value

null

15any

Default value

null

16any

Default value

null

17any

Default value

null

18any

Default value

null

19any

Default value

null

20any

Default value

null

21any

Default value

null

22any

Default value

null

23any

Default value

null

24any

Default value

null

25any

Default value

null

26any

Default value

null

27any

Default value

null

28any

Default value

null

29any

Default value

null

30any

Default value

null

31any

Default value

null

32any

Default value

null

33any

Default value

null

34any

Default value

null

35any

Default value

null

36any

Default value

null

37any

Default value

null

Example

Set the timeFormat property.

 <smart-date-range-input time-format='{ hour: 'numeric', minute: 'numeric' }'></smart-date-range-input>

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

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

Get the timeFormat property.

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

timepickerboolean

Determines whether time selection is available or not.

Default value

false

Example

Set the timepicker property.

 <smart-date-range-input timepicker></smart-date-range-input>

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

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

Get the timepicker property.

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

themestring

Determines the theme for the element. Themes define the look of the elements.

Default value

""

Example

Set the theme property.

 <smart-date-range-input theme='blue'></smart-date-range-input>

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

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

Get the theme property.

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

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

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

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

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

Get the unfocusable property.

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

valuestring | object

Sets or gets the value of the element. The type of the value depends on the valueType property.

Default value

""

Example

Set the value property.

 <smart-date-range-input value='value1'></smart-date-range-input>

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

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

Get the value property.

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

valueType"string" | "object"

Determines the value type returned from the `value` property.

Default value

"string"

Example

Set the valueType property.

 <smart-date-range-input value-type='object'></smart-date-range-input>

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

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

Get the valueType property.

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

Events

changeCustomEvent

This event is triggered when the selection is changed.

  • 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 drop down.


Invoke the close method.

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

Try a demo showcasing the close method.

open(): void

Opens the drop down.


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 inside the input or if it is readonly then the element is focused.


Invoke the select method.

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