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

AautoCloseSpecifies whether the calendar button pop-up should automatically close after a user selects a date or time. If set to true, the pop-up will close immediately upon selection; if false, the pop-up will remain open, allowing multiple selections or further interaction.
AautoCloseDelaySpecifies the duration (in milliseconds) to wait before automatically closing the calendar pop-up after it is opened. This setting is effective only when autoClose is set to true; if autoClose is false, this option is ignored.
CcalendarPropertiesSpecifies the configuration options and properties that will be applied to the popup calendar, such as date format, selectable date range, default view, and localization settings.
DdateTimeFormatSpecifies the format in which dates are displayed within the input field. This property accepts a configuration object compatible with the ECMAScript Internationalization API (Intl.DateTimeFormat). You can customize the date format by providing options such as day, month, and year with values like 'numeric', '2-digit', 'long', etc. For example, { day: 'numeric', month: 'long', year: '2-digit' }. Internally, JavaScript’s Intl.DateTimeFormat is used to format the date strings according to these options. If not specified, the default format is { day: 'numeric', month: 'numeric', year: 'numeric' }, which displays dates using numeric day, month, and year values (e.g., 06/11/2024). Click for more details. Property object's options:
    DdisabledDetermines whether the element is enabled and interactive, or disabled and non-interactive. When set to true, the element is disabled and cannot be interacted with by the user; when set to false, the element remains enabled and fully functional.
    DdropDownButtonPositionSpecifies the placement of the dropdown button within its container, such as aligning it to the left, right, center, or another designated position. This setting affects where the button appears in relation to surrounding elements.
    DdropDownHeightSpecifies the height of the drop-down menu. By default, the height is set to 'auto', allowing the drop-down to automatically adjust its size based on its content. You can set a specific value (e.g., '200px', '50%', etc.) to limit or customize the height as needed.
    DdropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable. If a specific value is provided (such as "200px" or "50%"), it will override the CSS variable and explicitly set the dropdown's width to that value. Use this property to customize the dropdown’s width as needed.
    FformatStringSets the custom date and time formatting pattern. When the 'formatString' property is set, it takes precedence over the 'dateTimeFormat' property, which will be disabled. The formatted output will strictly follow the pattern defined in 'formatString'.'Built-in Format Strings:'- ''d'': Short date pattern (e.g., 'M/d/yyyy')- ''D'': Long date pattern (e.g., 'dddd, MMMM dd, yyyy')- ''t'': Short time pattern (e.g., 'h:mm tt')- ''T'': Long time pattern (e.g., 'h:mm:ss tt')- ''f'': Long date, short time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm tt')- ''F'': Long date, long time pattern (e.g., 'dddd, MMMM dd, yyyy h:mm:ss tt')- ''M'': Month/day pattern (e.g., 'MMMM dd')- ''Y'': Year/month pattern (e.g., 'yyyy MMMM')- ''S'': Sortable date/time pattern, culture-invariant (e.g., 'yyyy-MM-ddTHH:mm:ss')'Custom Format String Components:'- ''d'': Day of month (1–31)- ''dd'': Day of month, two digits (01–31)- ''ddd'': Abbreviated day name (e.g., Mon, Tue)- ''dddd'': Full day name (e.g., Monday, Tuesday)- ''h'': Hour (12-hour clock, 1–12)- ''hh'': Hour (12-hour clock, two digits, 01–12)- ''H'': Hour (24-hour clock, 0–23)- ''HH'': Hour (24-hour clock, two digits, 00–23)- ''m'': Minute (0–59)- ''mm'': Minute, two digits (00–59)- ''M'': Month (1–12)- ''MM'': Month, two digits (01–12)- ''MMM'': Abbreviated month name (e.g., Jan, Feb)- ''MMMM'': Full month name (e.g., January, February)- ''s'': Second (0–59)- ''ss'': Second, two digits (00–59)- ''t'': First character of the AM/PM designator (A or P)- ''tt'': AM/PM designator- ''y'': Year, last one or two digits (e.g., 0–99)- ''yy'': Year, last two digits (00–99)- ''yyy'': Year, minimum three digits- ''yyyy'': Year, four digits (e.g., 2024)- ''yyyyy'': Year, minimum five digits (pads with leading zeros if necessary)'Note:' Use these format specifiers to customize how dates and times are displayed in your application. If you assign a value to 'formatString', make sure to use the correct pattern for your intended output. When this property is active, 'dateTimeFormat' settings are ignored.
    IinputPurposeDefines the expected type of input data for the form element and specifies whether, and to what extent, the browser or user agent is allowed to provide automated autofill assistance. This value directly corresponds to the standard HTML autocomplete attribute and guides browsers in offering suggestions to the user, improving form completion speed and accuracy. Possible values include generic options such as 'on' or 'off', as well as more specific values describing the kind of information expected—such as 'name', 'email', 'organization', 'street-address', and others. Setting this attribute helps enhance both user experience and data accuracy by allowing browsers to match the input field with saved user data.
    UunlockKeyRetrieves or assigns the unlockKey value used to authenticate and grant access to the product. The unlockKey serves as a security credential required to unlock the product’s features or content.
    LlocaleSpecifies or retrieves the current language setting. This property determines which language is used when displaying messages, in coordination with the messages property that holds localized message strings for different languages. Adjusting this property updates the displayed messages to match the selected language.
    LlocalizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify or enhance the appearance, structure, or content of localization messages before they are rendered to the user.
    MmaxSpecifies the latest selectable date that can be displayed in the popup's Calendar. Dates beyond this value will be disabled and cannot be selected by the user.
    MmessagesDefines or retrieves an object containing the set of user-facing strings displayed by the widget, allowing them to be customized for different languages. This property works in conjunction with the locale property to support localization and internationalization of the widget interface. By providing translated strings in this object, you can ensure that all text elements within the widget match the selected locale.
    MminSpecifies the earliest selectable date that can be shown in the Calendar component within the popup. Dates prior to this value will be disabled and cannot be selected by the user.
    NnameEnhances or retrieves the value of the 'name' attribute for the element. The 'name' attribute assigns a unique identifier to the element, which is essential when submitting form data. During form submission, the value of the element is sent to the server associated with this 'name', allowing the server to correctly process and recognize each field of the form.
    OopenedSpecifies whether the dropdown menu is currently open (visible to the user) or closed (hidden from view).
    PplaceholderSpecifies the placeholder text that appears inside the input field before the user enters a value. This text provides guidance or an example of the expected input format.
    RreadonlyDetermines whether the user can enter or edit text in the input field. When the dropDownButtonPosition property is set to 'left' or 'right' and a dataSource is provided, the readonly property controls the input's behavior: - If readonly is false, the element functions as a ComboBox, allowing users to type custom values in addition to selecting from the drop-down list. - If readonly is true, the element functions as a DropDownList, restricting user input to selections from the provided list only; manual text entry is disabled.
    RrightToLeftSets or retrieves a value that specifies whether the element’s text and layout are aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, ensuring proper display and reading order for locales that use RTL scripts.
    TthemeSpecifies the visual theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element.
    UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or script-based focus methods.
    VvalueGets or sets the value of the element. The value should be either a date string (e.g., "2024-06-01"), a JavaScript Date object, or null to indicate no value.

    Events

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

    Methods

    CcloseCloses the dropdown menu, hiding its options from view and returning the dropdown component to its inactive state.
    OopenDisplays and expands the dropdown menu, allowing the user to view and select available options.
    SselectEnhancement:"Selects the text within the input element. If the input is marked as readonly, the element will be focused without selecting its content."
    GgetFormattedValueReturns the value converted to the specified format, ensuring that the output matches the required data type or structure as requested.
    GgetValueReturns the date portion extracted from the provided input, which can be a date, datetime string, or timestamp. The output is formatted as a standard date (e.g., "YYYY-MM-DD"), omitting any time or timezone information present in the input.
    SsetValueSpecifies the date value for the input field. This determines the preselected date that appears in the date picker when the input is rendered, or programmatically sets the input's current date. The value should follow the format 'YYYY-MM-DD' to ensure compatibility across browsers.

    Properties

    autoCloseboolean

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

    Default value

    false

    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

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

    Default value

    500

    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;

    calendarPropertiesany

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

    dateTimeFormatany

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



    The 3 property's object value may have the following properties:
    • day: string - Day format.
    • month: string - Month format.
    • year: string - Year format.

    Default value

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

    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

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

    Default value

    false
    Try a demo showcasing the disabled property.

    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"

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

    Allowed Values

    • "none" - The drop down button is hidden and the element acts as a simple input.
    • "left" - A drop down button is displayed on the left side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
    • "right" - A drop down button is displayed on the right side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.

    Default value

    "right"
    Try a demo showcasing the dropDownButtonPosition property.

    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

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

    Default value

    auto

    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

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

    Default value

    ""

    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 custom date and time formatting pattern. When the 'formatString' property is set, it takes precedence over the 'dateTimeFormat' property, which will be disabled. The formatted output will strictly follow the pattern defined in 'formatString'.

    'Built-in Format Strings:'

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

    'Custom Format String Components:'

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

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

    Default value

    ""

    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

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

    Default value

    "off"

    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;

    unlockKeystring

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

    Default value

    ""

    Example

    Set the unlockKey property. 

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

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

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

    Get the unlockKey property. 

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

    localestring

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

    Default value

    "en"

    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

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

    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

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

    Default value

    new Date(2100, 1, 1)

    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

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

    Default value




    "en": {

    "propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

    "propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

    "propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

    "elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

    "moduleUndefined": "Module is undefined.",

    "missingReference": "{{elementType}}: Missing reference to {{files}}.",

    "htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

    "invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

    "invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

    }

    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

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

    Default value

    new Date(1900, 1, 1)

    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

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

    Default value

    ""

    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

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

    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

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

    Default value

    ""
    Try a demo showcasing the placeholder property.

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

    Default value

    false
    Try a demo showcasing the readonly property.

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

    Default value

    false
    Try a demo showcasing the rightToLeft property.

    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

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

    Default value

    ""

    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

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

    Default value

    false

    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

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

    Default value

    ""

    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 whenever the user changes the current selection, such as highlighting different text, selecting a new item in a list, or modifying the currently selected elements. It allows you to execute custom code in response to any change in selection within the relevant component or interface.

    • Bubbles Yes
    • Cancelable No
    • Interface CustomEvent
    • Event handler property onChange

    Arguments

    evCustomEvent
    ev.detailObject
    ev.detail.label - The label of the new selected item.
    ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
    ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
    ev.detail.value - The value of the new selected item.

    Methods

    isDefaultPrevented

    Returns true if the event was prevented by any of its subscribers.

    Returns

    boolean true if the default action was prevented. Otherwise, returns false.

    preventDefault

    The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

    stopPropagation

    The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

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


    Invoke the close method.

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

    Try a demo showcasing the close method.

    open(): void

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


    Invoke the open method.

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

    Try a demo showcasing the open method.

    select(): void

    Enhancement:

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


    Invoke the select method.

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

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

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

    Arguments

    valuestring | Date

    The value to be formatted by the method.

    format?any

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


    Invoke the getFormattedValue method.

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

    getValue(): void

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


    Invoke the getValue method.

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

    setValue( value: string | Date): void

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

    Arguments

    valuestring | Date

    The value to be set.


    Invoke the setValue method.

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