DateInput JAVASCRIPT UI Component API

DateInput Javascript API

Class

DateInput

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

Properties

AautoCloseDetermines whether the calendar button pop-up will be closed automatically when date or time is selected through it.
AautoCloseDelayDetermines the delay before the calendar pop-up is automatically closed. Applicable only when autoClose is set to true.
DdateTimeFormatDetermines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. Intl.DateTimeFormat is used to format date strings in JavaScript. By default the date format is 'numeric'. The default value is: { day: 'numeric', month: 'numeric', year: 'numeric' } Click for more details. Property object's options:
    DdisabledEnables or disables the element.
    DdropDownButtonPositionDetermines the position of the drop down button.
    DdropDownHeightSets the height of the drop down. By default it's set to 'auto'.
    DdropDownWidthSets 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.
    FformatStringSets the format string. When this property is set, the dateTimeFormat property will be disabled and the formatting will use the value of the formatString. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
    IinputPurposeSets 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.
    LlocaleSets or gets the language. Used in conjunction with the property messages.
    LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
    MmaxDetermines the max date for the Calendar displayed inside the popup.
    MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
    MminDetermines the min date for the Calendar displayed inside the popup.
    NnameSets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
    OopenedDetermines whether the drop down is opened or not.
    PplaceholderDetermines the placeholder of the input.
    RreadonlyDetermines 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.
    RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
    TthemeDetermines the theme for the element. Themes define the look of the elements.
    UunfocusableIf is set to true, the element cannot be focused.
    VvalueSets or gets the value of the element. Expected value is: Date string, Date object or null.

    Events

    CchangeThis event is triggered when the selection is changed.

    Methods

    CcloseCloses the drop down.
    OopenOpens the drop down.
    SselectSelects the text inside the input or if it is readonly then the element is focused.
    GgetFormattedValueReturns the value in the desired format.
    GgetValueReturns the date of the input.
    SsetValueSets the date of the input.

    Properties

    autoCloseboolean

    Determines whether the calendar button pop-up will be closed automatically when date or time is selected through it.

    Default value

    false

    Example

    Set the autoClose property. 

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

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

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

    Get the autoClose property. 

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

    autoCloseDelaynumber

    Determines the delay before the calendar pop-up is automatically closed. Applicable only when autoClose is set to true.

    Default value

    500

    Example

    Set the autoCloseDelay property. 

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

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

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

    Get the autoCloseDelay property. 

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

    dateTimeFormatany

    Determines the format of the dates displayed in the input. Accepts valid ECMAScript Internationalization API format. Intl.DateTimeFormat is used to format date strings in JavaScript. By default the date format is 'numeric'. The default value is: { day: 'numeric', month: 'numeric', year: 'numeric' }



    The 2 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' }

    Example

    Set the dateTimeFormat property. 

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

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

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

    Get the dateTimeFormat property. 

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

    disabledboolean

    Enables or disables the element.

    Default value

    false
    Try a demo showcasing the disabled property.

    Example

    Set the disabled property. 

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

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

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

    Get the disabled property. 

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

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

    Determines the position of the drop down button.

    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. 

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

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

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

    Get the dropDownButtonPosition property. 

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

    dropDownHeightstring | number

    Sets the height of the drop down. By default it's set to 'auto'.

    Default value

    auto

    Example

    Set the dropDownHeight property. 

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

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

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

    Get the dropDownHeight property. 

     const dateinput = document.querySelector('smart-date-input');
     let dropDownHeight = dateinput.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-input drop-down-width='300'></smart-date-input>

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

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

    Get the dropDownWidth property. 

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

    formatStringstring

    Sets the format string. When this property is set, the dateTimeFormat property will be disabled and the formatting will use the value of the formatString. Built-in Date formats:
    // short date pattern
    'd' - 'M/d/yyyy',
    // long date pattern
    'D' - 'dddd, MMMM dd, yyyy',
    // short time pattern
    't' - 'h:mm tt',
    // long time pattern
    'T' - 'h:mm:ss tt',
    // long date, short time pattern
    'f' - 'dddd, MMMM dd, yyyy h:mm tt',
    // long date, long time pattern
    'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
    // month/day pattern
    'M' - 'MMMM dd',
    // month/year pattern
    'Y' - 'yyyy MMMM',
    // S is a sortable format that does not vary by culture
    'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

    Date format strings:
    'd'-the day of the month;
    'dd'-the day of the month
    'ddd'-the abbreviated name of the day of the week
    'dddd'- the full name of the day of the week
    'h'-the hour, using a 12-hour clock from 1 to 12
    'hh'-the hour, using a 12-hour clock from 01 to 12

    'H'-the hour, using a 24-hour clock from 0 to 23
    'HH'- the hour, using a 24-hour clock from 00 to 23
    'm'-the minute, from 0 through 59
    'mm'-the minutes,from 00 though59
    'M'- the month, from 1 through 12
    'MM'- the month, from 01 through 12
    'MMM'-the abbreviated name of the month
    'MMMM'-the full name of the month
    's'-the second, from 0 through 59
    'ss'-the second, from 00 through 59
    't'- the first character of the AM/PM designator
    'tt'-the AM/PM designator
    'y'- the year, from 0 to 99
    'yy'- the year, from 00 to 99
    'yyy'-the year, with a minimum of three digits
    'yyyy'-the year as a four-digit number;
    'yyyyy'-the year as a four-digit number.

    Default value

    ""

    Example

    Set the formatString property. 

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

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

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

    Get the formatString property. 

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

    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-input input-purpose='on'></smart-date-input>

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

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

    Get the inputPurpose property. 

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

    localestring

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

    Default value

    "en"

    Example

    Set the locale property. 

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

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

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

    Get the locale property. 

     const dateinput = document.querySelector('smart-date-input');
     let locale = dateinput.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-input localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-date-input>

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

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

    Get the localizeFormatFunction property. 

     const dateinput = document.querySelector('smart-date-input');
     let localizeFormatFunction = dateinput.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-input max='2100, 1, 2'></smart-date-input>

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

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

    Get the max property. 

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

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

     const dateinput = document.querySelector('smart-date-input');
     dateinput.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 dateinput = document.querySelector('smart-date-input');
     let messages = dateinput.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-input min='1900, 1, 2'></smart-date-input>

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

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

    Get the min property. 

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

    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-input name='dropdown'></smart-date-input>

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

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

    Get the name property. 

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

    openedboolean

    Determines whether the drop down is opened or not.

    Default value

    false

    Example

    Set the opened property. 

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

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

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

    Get the opened property. 

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

    placeholderstring

    Determines the placeholder of the input.

    Default value

    ""
    Try a demo showcasing the placeholder property.

    Example

    Set the placeholder property. 

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

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

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

    Get the placeholder property. 

     const dateinput = document.querySelector('smart-date-input');
     let placeholder = dateinput.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
    Try a demo showcasing the readonly property.

    Example

    Set the readonly property. 

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

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

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

    Get the readonly property. 

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

    rightToLeftboolean

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

    Default value

    false
    Try a demo showcasing the rightToLeft property.

    Example

    Set the rightToLeft property. 

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

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

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

    Get the rightToLeft property. 

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

    themestring

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

    Default value

    ""

    Example

    Set the theme property. 

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

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

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

    Get the theme property. 

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

    unfocusableboolean

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

    Default value

    false

    Example

    Set the unfocusable property. 

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

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

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

    Get the unfocusable property. 

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

    valueany

    Sets or gets the value of the element. Expected value is: Date string, Date object or null.

    Default value

    ""

    Example

    Set the value property. 

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

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

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

    Get the value property. 

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

    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 dateinput = document.querySelector('smart-date-input');
dateinput.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 dateinput = document.querySelector('smart-date-input');
dateinput.close();

    Try a demo showcasing the close method.

    open(): void

    Opens the drop down.


    Invoke the open method.

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

    getFormattedValue( value: string | Date, format?: any): void

    Returns the value in the desired format.

    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.


    Invoke the getFormattedValue method.

    const dateinput = document.querySelector('smart-date-input');
dateinput.getFormattedValue();

    getValue(): void

    Returns the date of the input.


    Invoke the getValue method.

    const dateinput = document.querySelector('smart-date-input');
dateinput.getValue();

    setValue( value: string | Date): void

    Sets the date of the input.

    Arguments

    valuestring | Date

    The value to be set.


    Invoke the setValue method.

    const dateinput = document.querySelector('smart-date-input');
dateinput.setValue();