DateTimePicker — Smart UI JavaScript API

DateTimePicker — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DateTimePicker - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-date-time-picker id="demo-datetimepicker"></smart-date-time-picker>

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

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

      el.value = new Date(2026, 3, 9, 14, 30);
      el.calendarButton = true;
      el.formatString = 'dd-MMM-yy HH:mm';

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

Developer Quick Reference

Component: DateTimePicker   Framework: JavaScript   Selector: smart-date-time-picker

API counts: 59 properties, 6 methods, 5 events

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

Common methods: close(), focus(), open(), select(), getDate(), setDate()

Common events: change, close, closing, open, opening

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

Date & time selection component. It allows to select both date and time with the same control.

Class

DateTimePicker

DateTimePicker

Date & time selection component. It allows to select both date and time with the same control.

Selector

smart-date-time-picker

Quick picks

changeclosedisabledfocusopenvalue

Properties

AanimationDefines or retrieves the current animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.
AanimationSettingsEnhances the animation behavior of the calendar pop-up when it is enabled by applying customizable animation settings.'Properties:'- 'startSpeed': Specifies the initial velocity of the animation when the calendar pop-up appears, controlling how quickly the animation begins.- 'easeThreshold': Defines the point within the animation at which the "ease effect" takes place, causing the animation to gradually slow down for a smoother transition.- 'step': Sets the interval at which the animation progresses (e.g., the number of pixels or frames per update), determining the smoothness and speed of the animation.- 'stepEaseSize': A multiplier used to calculate the new step size after the ease threshold has been crossed; this value fine-tunes how much the animation slows down.- 'resetThreshold': Establishes the limit at which the animation resets. Once this value is reached, the animation sequence restarts from the beginning.These settings allow for precise control over the appearance and feel of the calendar pop-up’s animation, providing an improved and customizable user experience.
AautoCloseSpecifies whether the calendar button pop-up should automatically close after a user selects a date or time. If enabled, the pop-up will be dismissed immediately upon selection, providing a streamlined user experience. If disabled, the pop-up will remain open, allowing for multiple selections or further interaction.
AautoCloseDelaySpecifies the duration, in milliseconds, to wait before automatically closing the calendar pop-up after it is triggered. This setting is effective only when autoClose is set to true.
CcalendarButtonControls the visibility of the calendar button. When visible, this button allows users to open the calendar popup and select a date. If hidden, users will not have access to the calendar popup from the interface.
CcalendarButtonPositionSpecifies the placement of the calendar button relative to the input field. For example, this setting can position the calendar button to the left, right, above, or below the input, allowing for flexible UI customization.
CcalendarModeSpecifies the display style of the calendar pop-up header, such as showing only the month, only the year, or both, to control how navigation and information are presented to the user.
DdayNameFormatSpecifies or retrieves the display format used for the day names (such as "Mon", "Monday", or "M") shown in the calendar popup. This determines how the days of the week are presented to users within the calendar interface.
DdisableAutoNavigationPrevents the calendar pop-up from automatically navigating to a different month when the user clicks on a date that belongs to another month (outside of the currently displayed month). This ensures that clicking on dates not in the current month view will not change the visible month.
DdisabledDetermines whether the element is interactive or not. When enabled, the element can receive user input and respond to actions; when disabled, the element becomes inactive and cannot be interacted with by the user.
DdisplayKindSpecifies the time zone in which the value should be displayed, ensuring that all date and time information is presented according to the selected region's local time settings. This affects how timestamps are interpreted and shown to the user.
DdisplayModeViewSpecifies the display format (month or year view) shown in the calendar pop-up when the calendarMode property is set to "Default". This setting controls whether users initially see a grid of months or a list of years, allowing for quicker navigation and selection within the calendar component.
DdropDownAppendToDefines a custom container element where the pop-up will be appended. By default, the pop-up is appended within the DateTimePicker component itself. You can specify this property by providing either an HTML element (such as a DOM node) or the string ID of an existing HTML element on the page. This allows you to control the positioning and containment of the pop-up within your application's layout.
DdropDownDisplayModeDefines or retrieves the pop-up display mode, specifying which components are shown within the pop-up and controlling how it behaves (such as its appearance, interaction options, and dismissal rules).
DdropDownOverlayWhen this property is enabled, opening the element's dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the document. This overlay helps to visually separate the dropdown from other page content and can be used to intercept interactions with elements outside the dropdown while it is open.
DdropDownPositionSpecifies the location on the screen where the pop-up will appear when it is activated, allowing you to control its alignment relative to a reference element or the viewport.
EeditModeSpecifies the permitted methods for modifying the input's value, such as whether users can manually enter or edit text, select from predefined options, or if the input is read-only and cannot be changed.
EenableMouseWheelActionSpecifies whether the input value can be increased or decreased using the mouse wheel when the cursor is hovering over the input field. When enabled, scrolling the mouse wheel up increments the value, while scrolling down decrements it.
FfirstDayOfWeekSpecifies which day of the week should be displayed as the first column in the calendar pop-up. Accepts values from 0 (Sunday) to 6 (Saturday), where each number corresponds to a day of the week. For example, setting this value to 1 will make Monday the first day of the week in the calendar view.
FfooterSpecifies whether the footer section should be visible on the interface. Set this option to 'true' to display the footer, or 'false' to hide it.
FfooterTemplateDefines or retrieves the footer template used in the calendar pop-up. This property accepts either the ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. Assigning null reverts the calendar's footer to the default template. If a valid template is provided, it will be rendered in the footer area of the calendar pop-up, allowing for customized content or functionality.
FformatStringSpecifies the format pattern used to display date and time values. You can use standard built-in format specifiers or custom format strings to control the appearance of the output.'Built-in Date and Time Format Specifiers:'| Specifier | Description | Example Output ||-----------|------------------------------------------|------------------------------------|| 'd' | Short date pattern | 'M/d/yyyy' (e.g., 4/9/2024) || 'D' | Long date pattern | 'dddd, MMMM dd, yyyy' (e.g., Tuesday, April 9, 2024) || 't' | Short time pattern | 'h:mm tt' (e.g., 3:45 PM) || 'T' | Long time pattern | 'h:mm:ss tt' (e.g., 3:45:30 PM) || 'f' | Long date, short time | 'dddd, MMMM dd, yyyy h:mm tt' (e.g., Tuesday, April 9, 2024 3:45 PM) || 'F' | Long date, long time | 'dddd, MMMM dd, yyyy h:mm:ss tt' (e.g., Tuesday, April 9, 2024 3:45:30 PM) || 'M' | Month/day pattern | 'MMMM dd' (e.g., April 09) || 'Y' | Year/month pattern | 'yyyy MMMM' (e.g., 2024 April) || 'S' | Sortable, culture-invariant date/time | 'yyyy-MM-ddTHH:mm:ss' (e.g., 2024-04-09T15:45:30) |'Custom Date and Time Format Strings:'- 'Day' - ''d'' : Day of the month (1–31) - ''dd'' : Day of the month, two digits (01–31) - ''ddd'' : Abbreviated weekday name (e.g., Tue) - ''dddd'': Full weekday name (e.g., Tuesday)- 'Hour' - ''h'' : 12-hour clock hour (1–12) - ''hh'' : 12-hour clock hour, two digits (01–12) - ''H'' : 24-hour clock hour (0–23) - ''HH'' : 24-hour clock hour, two digits (00–23)- 'Minute' - ''m'' : Minutes (0–59) - ''mm'' : Minutes, two digits (00–59)- 'Month' - ''M'' : Month (1–12) - ''MM'' : Month, two digits (01–12) - ''MMM'' : Abbreviated month name (e.g., Apr) - ''MMMM'': Full month name (e.g., April)- 'Second' - ''s'' : Seconds (0–59) - ''ss'' : Seconds, two digits (00–59)- 'AM/PM Designator' - ''t'' : First character of AM/PM (e.g., A or P) - ''tt'' : AM/PM designator (e.g., AM or PM)- 'Year' - ''y'' : Year, one or two digits (e.g., 0–99) - ''yy'' : Year, two digits (e.g., 00–99) - ''yyy'' : Year, minimum three digits (e.g., 2024) - ''yyyy'' : Year, four digits (e.g., 2024) - ''yyyyy'' : Year, at least five digits (pads with leading zeros if needed)For detailed formatting, custom format strings can be combined as needed, for example: ''yyyy-MM-dd HH:mm:ss'' would display as '2024-04-09 15:45:30'.'Note:' The output may vary according to localization and culture settings unless otherwise specified (e.g., the 'S' format is culture-invariant).
HheaderTemplateDefines a custom header template for the calendar pop-up. You can provide either the string ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section of the calendar's pop-up interface.
HhideDayNamesThis option removes or conceals the display of weekday names (such as "Monday," "Tuesday," etc.) from the calendar pop-up, leaving only the days of the month visible to the user.
HhideOtherMonthDaysSpecifies whether days from adjacent months (previous or next) are displayed in the calendar pop-up. When enabled, dates that fall outside the currently selected month are shown in the calendar view, typically in a muted or lighter style. Disabling this option will hide these out-of-month days, so only the dates belonging to the current month are visible.
HhideTooltipArrowPrevents the arrow indicator from being displayed in the calendar tooltip pop-up, resulting in a cleaner appearance without the arrow pointing to the trigger element.
HhintDisplays supplementary helper text beneath the element, which becomes visible exclusively when the element is focused. This text is intended to provide contextual guidance or instructions to users as they interact with the element.
IimportantDatesHighlights specific dates in the calendar pop-up, marking them as important to make them stand out visually to users. These dates can be used to indicate special events, deadlines, or other significant occurrences.
IimportantDatesTemplateDefines the template used to display important dates within the calendar pop-up. This property accepts either the ID of an existing '<template>' element or a direct reference to an 'HTMLTemplateElement' in the DOM. The specified template determines how important dates are rendered inside the calendar interface, allowing for custom formatting and content.
IintervalDefines or retrieves the time interval used to increment or decrement the value of the date/time input when no specific segment (such as hours, minutes, or seconds) is actively highlighted or selected by the user. By default, this interval is set to 1 second. If you provide a numeric value, it should be specified in milliseconds. For example, passing 500 will set the interval to half a second. This setting determines how quickly the value changes when the user uses controls to adjust the input without a segment highlighted.
LlabelDisplays a descriptive label above the element to provide context or identify its purpose for users.
LlocaleSpecifies or retrieves the locale setting that determines the language and regional formatting used to display labels and other text elements within the DateTimePicker. This affects how dates, times, and UI labels are presented to the user, ensuring localization according to the selected language and region.
LlocalizeFormatFunctionCallback function that allows you to define a custom formatting for messages returned by the Localization Module. Use this to control how localized messages are structured or displayed before they are delivered to your application.
MmaxSpecifies the maximum permitted value for this property. When set, values greater than this limit are not accepted. When retrieved, returns the current maximum value constraint.
MmessagesDefines or retrieves an object containing the text strings displayed in the widget, allowing these strings to be customized for different languages or regions. This property works together with the locale setting to enable localization, ensuring that the widget’s UI elements can be translated and adapted to the user’s language preferences.
MminSpecifies the lowest permissible value that can be assigned. When setting, it defines the minimum value that is valid; when getting, it returns the current minimum constraint applied.
NnameSpecifies or retrieves the value of the element's name attribute. This name is used as the key when the form data is submitted, allowing the server to identify and process the corresponding value for this element.
NnullableControls whether the value property can be set to null or an empty string. When this option is enabled and the user deletes the value in the input field, the value property is set to null, causing the placeholder text to be shown. If this option is disabled, deleting the input will automatically set the value property to the current date and time instead of null or an empty string.
OopenedDetermines whether the calendar pop-up is currently open. You can use this property to programmatically open or close the calendar, or to check if it is visible to the user.
PplaceholderDefines the placeholder text displayed in the input field when the value property is null. This text provides a visual hint or example to users, indicating the expected input until a value is entered.
RreadonlyPrevents users from interacting with the element by disabling all input events, such as clicks, taps, keyboard input, and form submissions. The element will not respond to any user actions while this setting is enabled.
RrestrictedDatesSpecifies or retrieves an array of dates—either as DateTime strings or JavaScript Date objects—that are disabled and cannot be selected by the user. This prevents selection of any date included in the array within the date picker or calendar component.
RrightToLeftSets or retrieves a value that specifies whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.
SspinButtonsSpecifies whether the spin buttons are visible. Spin buttons allow users to increment or decrement the date or time value by clicking up or down arrows. When enabled, these controls provide a convenient way to adjust the input without manual typing.
SspinButtonsDelaySpecifies the time interval, in milliseconds, between consecutive activations of the spin buttons when they are held down. This determines how quickly the value will change while the button is continuously pressed.
SspinButtonsInitialDelaySpecifies the delay, in milliseconds, before the spin button begins repeating its action after being pressed and held for the first time. This determines how long the user needs to hold down the spin button before subsequent value changes occur automatically.
SspinButtonsPositionConfigures or retrieves the position of the spin buttons relative to the input field, such as placing them on the left, right, or another specified location. This property allows developers to control the layout and visual alignment of the spin buttons within the component.
TthemeDefines or retrieves the element's visual theme, such as its color scheme, style, or appearance, to ensure consistency with the application's overall design.
TtooltipControls whether tooltips are displayed for important dates in the calendar pop-up. When enabled, hovering over an important date shows additional information in a tooltip; when disabled, no tooltip appears.
TtooltipDelaySpecifies the amount of time (in milliseconds) to wait before displaying the tooltip for the calendar pop-up after the user hovers over or focuses on the relevant element.
TtooltipPositionSpecifies the location where the tooltip will appear relative to the calendar pop-up, such as above, below, to the left, or to the right of the calendar. This setting determines the tooltip’s alignment and positioning when users interact with the calendar interface.
TtooltipTemplateDefines a custom template for the tooltip content displayed in the calendar pop-up. This property accepts either the ID of an HTML <template> element or a direct reference to an HTMLTemplateElement. The specified template will be used to render the tooltip, allowing for customized layout and content in the calendar interface.
UunfocusableDetermines whether the element can receive keyboard focus, allowing users to interact with it using the Tab key or other navigation methods. This property can be used to enable or disable focusability programmatically. When set, it also allows you to check if the element is currently focusable.
UunlockKeySets or retrieves the unlockKey, a unique key required to activate or access the product's features. When provided, the unlockKey enables the user to unlock and use the product.
VvalidationSpecifies the validation method that enforces minimum and maximum value constraints. This determines how the input value is checked to ensure it falls within the defined minimum and maximum range.
VvalueSets or retrieves the value of the element. This value represents the current date and time associated with the element, stored as a DateTime object. When setting the value, you provide a DateTime object to update the element’s date and time. When getting the value, it returns the currently assigned DateTime object reflecting the element’s date and time.
WweekNumbersControls whether week numbers are displayed in the calendar pop-up. When enabled, a numerical label appears next to each week, making it easier for users to reference specific weeks. When disabled, these week numbers will not be shown.
WweeksSpecifies how many weeks are displayed at once in the calendar pop-up view, allowing you to control the visible portion of the calendar grid when it is opened. Adjusting this value changes the number of week rows shown to the user.
YyearCutoffSpecifies the starting year of a 100-year range used to interpret 2-digit year values. By default, this is set to 1926, meaning that 2-digit years from 26 to 99 will be mapped to the years 1926 to 1999, and 2-digit years from 00 to 25 will be interpreted as 2000 to 2025. This setting ensures that legacy 2-digit year inputs are correctly converted to their corresponding 4-digit year representations within the defined century span.

Events

CchangeThis event is triggered whenever the value associated with the component or input field is modified by the user or programmatically. It activates each time a change is detected, allowing you to respond to updates in real-time, such as validating input, updating UI elements, or saving new data.
CcloseThis event is triggered when the calendar pop-up is closed by the user, either by selecting a date or dismissing the pop-up through other means (such as clicking outside the calendar or pressing the Escape key).
CclosingThis event is fired immediately before the calendar pop-up is closed. At this stage, event handlers have the opportunity to intercept the closing action. If you want to prevent the calendar from closing—for example, to validate user input or display a confirmation message—you can call event.preventDefault() within your event handler. Doing so will cancel the close operation, keeping the calendar pop-up open until the condition is resolved.
OopenThis event is triggered whenever the calendar pop-up component becomes visible to the user, such as when a user clicks on the input field or calendar icon to display the calendar interface.
OopeningThis event fires immediately before the calendar pop-up is displayed to the user. Developers can intercept this event and prevent the calendar from opening by invoking event.preventDefault() within the event handler. This allows for custom validation or logic to be executed prior to showing the calendar interface.

Methods

CcloseTriggers the closure of the calendar pop-up window, removing it from view and returning focus to the primary interface.
FfocusSets the keyboard focus to the input field, allowing users to immediately begin typing without needing to click on the input. This improves usability by enabling faster and more intuitive data entry.
GgetDateRetrieves and returns a JavaScript Date object representing a specific point in time.
OopenDisplays the calendar pop-up, allowing users to select a date from an interactive calendar interface.
SselectAutomatically highlights all the text contained within the input field, allowing users to easily copy, cut, or overwrite the current content.
SsetDateSpecifies the selected date to be displayed and managed by the DateTimePicker component. Setting this value determines the currently chosen date shown in the picker interface.

Properties

animationDefines or retrieves the current animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects."none" | "simple" | "advanced"

Defines or retrieves the current animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-date-time-picker animation="none"></smart-date-time-picker>

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

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

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const animation = el.animation;

animationSettingsEnhances the animation behavior of the calendar pop-up when it is enabled by applying customizable animation settings.'Properties:'- 'startSpeed': Specifies the initial velocity of the animation when the calendar pop-up appears, controlling how quickly the animation begins.- 'easeThreshold': Defines the point within the animation at which the "ease effect" takes place, causing the animation to gradually slow down for a smoother transition.- 'step': Sets the interval at which the animation progresses (e.g., the number of pixels or frames per update), determining the smoothness and speed of the animation.- 'stepEaseSize': A multiplier used to calculate the new step size after the ease threshold has been crossed; this value fine-tunes how much the animation slows down.- 'resetThreshold': Establishes the limit at which the animation resets. Once this value is reached, the animation sequence restarts from the beginning.These settings allow for precise control over the appearance and feel of the calendar pop-up’s animation, providing an improved and customizable user experience.object

Enhances the animation behavior of the calendar pop-up when it is enabled by applying customizable animation settings.

'Properties:'

- 'startSpeed': Specifies the initial velocity of the animation when the calendar pop-up appears, controlling how quickly the animation begins.
- 'easeThreshold': Defines the point within the animation at which the "ease effect" takes place, causing the animation to gradually slow down for a smoother transition.
- 'step': Sets the interval at which the animation progresses (e.g., the number of pixels or frames per update), determining the smoothness and speed of the animation.
- 'stepEaseSize': A multiplier used to calculate the new step size after the ease threshold has been crossed; this value fine-tunes how much the animation slows down.
- 'resetThreshold': Establishes the limit at which the animation resets. Once this value is reached, the animation sequence restarts from the beginning.

These settings allow for precise control over the appearance and feel of the calendar pop-up’s animation, providing an improved and customizable user experience.

Examples

Markup and runtime examples for animationSettings:

HTML:

<smart-date-time-picker animation-settings=""></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.animationSettings = { startSpeed: 0.2, easeThreshold : 0.5, step : 0.25, stepEaseSize : 200, resetThreshold : 0.2  };

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const animationSettings = el.animationSettings;

autoCloseSpecifies whether the calendar button pop-up should automatically close after a user selects a date or time. If enabled, the pop-up will be dismissed immediately upon selection, providing a streamlined user experience. If disabled, the pop-up will remain open, allowing for multiple selections or further interaction.boolean

Specifies whether the calendar button pop-up should automatically close after a user selects a date or time. If enabled, the pop-up will be dismissed immediately upon selection, providing a streamlined user experience. If disabled, the pop-up will remain open, allowing for multiple selections or further interaction.

Default value

false

Examples

Markup and runtime examples for autoClose:

HTML attribute:

<smart-date-time-picker auto-close></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.autoClose = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const autoClose = el.autoClose;

autoCloseDelaySpecifies the duration, in milliseconds, to wait before automatically closing the calendar pop-up after it is triggered. This setting is effective only when autoClose is set to true.number

Specifies the duration, in milliseconds, to wait before automatically closing the calendar pop-up after it is triggered. This setting is effective only when autoClose is set to true.

Default value

500

Examples

Markup and runtime examples for autoCloseDelay:

HTML:

<smart-date-time-picker auto-close-delay="0"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.autoCloseDelay = 100;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const autoCloseDelay = el.autoCloseDelay;

calendarButtonControls the visibility of the calendar button. When visible, this button allows users to open the calendar popup and select a date. If hidden, users will not have access to the calendar popup from the interface.boolean

Controls the visibility of the calendar button. When visible, this button allows users to open the calendar popup and select a date. If hidden, users will not have access to the calendar popup from the interface.

Default value

false
Try a demo showcasing the calendarButton property.

Examples

Markup and runtime examples for calendarButton:

HTML attribute:

<smart-date-time-picker calendar-button></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.calendarButton = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const calendarButton = el.calendarButton;

calendarButtonPositionSpecifies the placement of the calendar button relative to the input field. For example, this setting can position the calendar button to the left, right, above, or below the input, allowing for flexible UI customization."left" | "right"

Specifies the placement of the calendar button relative to the input field. For example, this setting can position the calendar button to the left, right, above, or below the input, allowing for flexible UI customization.

Allowed Values

  • "left" - Positions the calendar button on the left side of the element.
  • "right" - Positions the calendar button on the right side of the element.

Default value

"right"
Try a demo showcasing the calendarButtonPosition property.

Examples

Markup and runtime examples for calendarButtonPosition:

HTML:

<smart-date-time-picker calendar-button-position="left"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.calendarButtonPosition = "right";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const calendarButtonPosition = el.calendarButtonPosition;

calendarModeSpecifies the display style of the calendar pop-up header, such as showing only the month, only the year, or both, to control how navigation and information are presented to the user."default" | "classic"

Specifies the display style of the calendar pop-up header, such as showing only the month, only the year, or both, to control how navigation and information are presented to the user.

Allowed Values

  • "default" - Default mode displays different views for the month and year selection. The header becomes clickable when Defaut mode is enabled.
  • "classic" - Classic mode consists of a DropDownList for the month selection and an Input for the year selection.

Default value

"default"

Examples

Markup and runtime examples for calendarMode:

HTML:

<smart-date-time-picker calendar-mode="classic"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.calendarMode = "default";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const calendarMode = el.calendarMode;

dayNameFormatSpecifies or retrieves the display format used for the day names (such as "Mon", "Monday", or "M") shown in the calendar popup. This determines how the days of the week are presented to users within the calendar interface."narrow" | "firstTwoLetters" | "long" | "short"

Specifies or retrieves the display format used for the day names (such as "Mon", "Monday", or "M") shown in the calendar popup. This determines how the days of the week are presented to users within the calendar interface.

Allowed Values

  • "narrow" - Displays a single letter of the day name.
  • "firstTwoLetters" - Displays the first two letters of the day name.
  • "long" - Displays the full day name.
  • "short" - Displays the abbreviation of the day name with upper case letters.

Default value

"firstTwoLetters"

Examples

Markup and runtime examples for dayNameFormat:

HTML:

<smart-date-time-picker day-name-format="long"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.dayNameFormat = "short";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const dayNameFormat = el.dayNameFormat;

disableAutoNavigationPrevents the calendar pop-up from automatically navigating to a different month when the user clicks on a date that belongs to another month (outside of the currently displayed month). This ensures that clicking on dates not in the current month view will not change the visible month.boolean

Prevents the calendar pop-up from automatically navigating to a different month when the user clicks on a date that belongs to another month (outside of the currently displayed month). This ensures that clicking on dates not in the current month view will not change the visible month.

Default value

false

Examples

Markup and runtime examples for disableAutoNavigation:

HTML attribute:

<smart-date-time-picker disable-auto-navigation></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.disableAutoNavigation = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const disableAutoNavigation = el.disableAutoNavigation;

disabledDetermines whether the element is interactive or not. When enabled, the element can receive user input and respond to actions; when disabled, the element becomes inactive and cannot be interacted with by the user.boolean

Determines whether the element is interactive or not. When enabled, the element can receive user input and respond to actions; when disabled, the element becomes inactive and cannot be interacted with by the user.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-date-time-picker disabled></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const disabled = el.disabled;

displayKindSpecifies the time zone in which the value should be displayed, ensuring that all date and time information is presented according to the selected region's local time settings. This affects how timestamps are interpreted and shown to the user."UTC" | "local" | "unspecified"

Specifies the time zone in which the value should be displayed, ensuring that all date and time information is presented according to the selected region's local time settings. This affects how timestamps are interpreted and shown to the user.

Allowed Values

  • "UTC" - Displays the value in Universal Time Zone.
  • "local" - Displays the value in Local Time Zone.
  • "unspecified" - 'unspecified' means that the value is displayed in the same time zone it was set in

Default value

"unspecified"
Try a demo showcasing the displayKind property.

Examples

Markup and runtime examples for displayKind:

HTML:

<smart-date-time-picker display-kind="UTC"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.displayKind = "local";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const displayKind = el.displayKind;

displayModeViewSpecifies the display format (month or year view) shown in the calendar pop-up when the calendarMode property is set to "Default". This setting controls whether users initially see a grid of months or a list of years, allowing for quicker navigation and selection within the calendar component."table" | "list"

Specifies the display format (month or year view) shown in the calendar pop-up when the calendarMode property is set to "Default". This setting controls whether users initially see a grid of months or a list of years, allowing for quicker navigation and selection within the calendar component.

Allowed Values

  • "table" - Displays a table of dates to select from.
  • "list" - Displays a list of dates to select from.

Default value

"table"

Examples

Markup and runtime examples for displayModeView:

HTML:

<smart-date-time-picker display-mode-view="list"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.displayModeView = "table";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const displayModeView = el.displayModeView;

dropDownAppendToDefines a custom container element where the pop-up will be appended. By default, the pop-up is appended within the DateTimePicker component itself. You can specify this property by providing either an HTML element (such as a DOM node) or the string ID of an existing HTML element on the page. This allows you to control the positioning and containment of the pop-up within your application's layout.string

Defines a custom container element where the pop-up will be appended. By default, the pop-up is appended within the DateTimePicker component itself. You can specify this property by providing either an HTML element (such as a DOM node) or the string ID of an existing HTML element on the page. This allows you to control the positioning and containment of the pop-up within your application's layout.

Default value

"null"

Examples

Markup and runtime examples for dropDownAppendTo:

HTML:

<smart-date-time-picker drop-down-append-to="'body'"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.dropDownAppendTo = "'customContainer'";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const dropDownAppendTo = el.dropDownAppendTo;

dropDownDisplayModeDefines or retrieves the pop-up display mode, specifying which components are shown within the pop-up and controlling how it behaves (such as its appearance, interaction options, and dismissal rules)."auto" | "default" | "classic" | "calendar" | "timePicker"

Defines or retrieves the pop-up display mode, specifying which components are shown within the pop-up and controlling how it behaves (such as its appearance, interaction options, and dismissal rules).

Allowed Values

  • "auto" - The display mode is based on the value of formatString.
  • "default" - Displays a Date and a Time selection tabs inside the popup to select from.
  • "classic" - Displays a Calendar inside the popup while time selection is available in the footer section of the Calendar.
  • "calendar" - Displays only Date selection view inside the popup.
  • "timePicker" - Displays only Time selection view inside the popup.

Default value

"default"
Try a demo showcasing the dropDownDisplayMode property.

Examples

Markup and runtime examples for dropDownDisplayMode:

HTML:

<smart-date-time-picker drop-down-display-mode="auto"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.dropDownDisplayMode = "default";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const dropDownDisplayMode = el.dropDownDisplayMode;

dropDownOverlayWhen this property is enabled, opening the element's dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the document. This overlay helps to visually separate the dropdown from other page content and can be used to intercept interactions with elements outside the dropdown while it is open.boolean

When this property is enabled, opening the element's dropdown will display a transparent overlay that covers the area between the dropdown and the rest of the document. This overlay helps to visually separate the dropdown from other page content and can be used to intercept interactions with elements outside the dropdown while it is open.

Default value

false

Examples

Markup and runtime examples for dropDownOverlay:

HTML attribute:

<smart-date-time-picker drop-down-overlay></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.dropDownOverlay = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const dropDownOverlay = el.dropDownOverlay;

dropDownPositionSpecifies the location on the screen where the pop-up will appear when it is activated, allowing you to control its alignment relative to a reference element or the viewport."auto" | "top" | "bottom" | "overlay-top" | "overlay-center" | "overlay-bottom" | "center-bottom" | "center-top"

Specifies the location on the screen where the pop-up will appear when it is activated, allowing you to control its alignment relative to a reference element or the viewport.

Allowed Values

  • "auto" - The position is automatically determined by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
  • "top" - The popup is positioned above the element.
  • "bottom" - The popup is positioned under the element.
  • "overlay-top" - The popup is positioned above and over the element. The bottom edges of the drop down cover the element.
  • "overlay-center" - The popup is positioned at the center, over the element.
  • "overlay-bottom" - The popup is positioned under and over the element. The top edges of the drop down cover the element.
  • "center-bottom" - The popup is positioned at the center, below the element.
  • "center-top" - The popup is positioned at the center, over the element.

Default value

"auto"
Try a demo showcasing the dropDownPosition property.

Examples

Markup and runtime examples for dropDownPosition:

HTML:

<smart-date-time-picker drop-down-position="center-bottom"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.dropDownPosition = "overlay-center";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const dropDownPosition = el.dropDownPosition;

editModeSpecifies the permitted methods for modifying the input's value, such as whether users can manually enter or edit text, select from predefined options, or if the input is read-only and cannot be changed."default" | "full" | "partial"

Specifies the permitted methods for modifying the input's value, such as whether users can manually enter or edit text, select from predefined options, or if the input is read-only and cannot be changed.

Allowed Values

  • "default" - The value can be edited by segments, e.g. year, month, day, hour, minute, etc. The user can navigate between the segments via keyboard. Backspace and Delete buttons delete the value as a simple input.
  • "full" - The value can be edited as a string. Like a simple input.
  • "partial" - The value can be edited by segments, e.g. year, month, day, hour, minute, etc. The user can navigate between the segments via keyboard. Backspace/Delete buttons reset the current segment to 0 of the value and move to the next / previous.

Default value

"default"
Try a demo showcasing the editMode property.

Examples

Markup and runtime examples for editMode:

HTML:

<smart-date-time-picker edit-mode="full"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.editMode = "partial";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const editMode = el.editMode;

enableMouseWheelActionSpecifies whether the input value can be increased or decreased using the mouse wheel when the cursor is hovering over the input field. When enabled, scrolling the mouse wheel up increments the value, while scrolling down decrements it.boolean

Specifies whether the input value can be increased or decreased using the mouse wheel when the cursor is hovering over the input field. When enabled, scrolling the mouse wheel up increments the value, while scrolling down decrements it.

Default value

false
Try a demo showcasing the enableMouseWheelAction property.

Examples

Markup and runtime examples for enableMouseWheelAction:

HTML attribute:

<smart-date-time-picker enable-mouse-wheel-action></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.enableMouseWheelAction = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const enableMouseWheelAction = el.enableMouseWheelAction;

firstDayOfWeekSpecifies which day of the week should be displayed as the first column in the calendar pop-up. Accepts values from 0 (Sunday) to 6 (Saturday), where each number corresponds to a day of the week. For example, setting this value to 1 will make Monday the first day of the week in the calendar view.number

Specifies which day of the week should be displayed as the first column in the calendar pop-up. Accepts values from 0 (Sunday) to 6 (Saturday), where each number corresponds to a day of the week. For example, setting this value to 1 will make Monday the first day of the week in the calendar view.

Default value

0

Examples

Markup and runtime examples for firstDayOfWeek:

HTML:

<smart-date-time-picker first-day-of-week="1"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.firstDayOfWeek = 0;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const firstDayOfWeek = el.firstDayOfWeek;

Specifies whether the footer section should be visible on the interface. Set this option to 'true' to display the footer, or 'false' to hide it.

Default value

false
Try a demo showcasing the footer property.

Examples

Markup and runtime examples for footer:

HTML attribute:

<smart-date-time-picker footer></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.footer = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const footer = el.footer;

footerTemplateDefines or retrieves the footer template used in the calendar pop-up. This property accepts either the ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. Assigning null reverts the calendar's footer to the default template. If a valid template is provided, it will be rendered in the footer area of the calendar pop-up, allowing for customized content or functionality.any

Defines or retrieves the footer template used in the calendar pop-up. This property accepts either the ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. Assigning null reverts the calendar's footer to the default template. If a valid template is provided, it will be rendered in the footer area of the calendar pop-up, allowing for customized content or functionality.

Examples

Markup and runtime examples for footerTemplate:

HTML:

<smart-date-time-picker footer-template="template1"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.footerTemplate = "document.getElementsByTagName('template')[0]";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const footerTemplate = el.footerTemplate;

formatStringSpecifies the format pattern used to display date and time values. You can use standard built-in format specifiers or custom format strings to control the appearance of the output.'Built-in Date and Time Format Specifiers:'| Specifier | Description | Example Output ||-----------|------------------------------------------|------------------------------------|| 'd' | Short date pattern | 'M/d/yyyy' (e.g., 4/9/2024) || 'D' | Long date pattern | 'dddd, MMMM dd, yyyy' (e.g., Tuesday, April 9, 2024) || 't' | Short time pattern | 'h:mm tt' (e.g., 3:45 PM) || 'T' | Long time pattern | 'h:mm:ss tt' (e.g., 3:45:30 PM) || 'f' | Long date, short time | 'dddd, MMMM dd, yyyy h:mm tt' (e.g., Tuesday, April 9, 2024 3:45 PM) || 'F' | Long date, long time | 'dddd, MMMM dd, yyyy h:mm:ss tt' (e.g., Tuesday, April 9, 2024 3:45:30 PM) || 'M' | Month/day pattern | 'MMMM dd' (e.g., April 09) || 'Y' | Year/month pattern | 'yyyy MMMM' (e.g., 2024 April) || 'S' | Sortable, culture-invariant date/time | 'yyyy-MM-ddTHH:mm:ss' (e.g., 2024-04-09T15:45:30) |'Custom Date and Time Format Strings:'- 'Day' - ''d'' : Day of the month (1–31) - ''dd'' : Day of the month, two digits (01–31) - ''ddd'' : Abbreviated weekday name (e.g., Tue) - ''dddd'': Full weekday name (e.g., Tuesday)- 'Hour' - ''h'' : 12-hour clock hour (1–12) - ''hh'' : 12-hour clock hour, two digits (01–12) - ''H'' : 24-hour clock hour (0–23) - ''HH'' : 24-hour clock hour, two digits (00–23)- 'Minute' - ''m'' : Minutes (0–59) - ''mm'' : Minutes, two digits (00–59)- 'Month' - ''M'' : Month (1–12) - ''MM'' : Month, two digits (01–12) - ''MMM'' : Abbreviated month name (e.g., Apr) - ''MMMM'': Full month name (e.g., April)- 'Second' - ''s'' : Seconds (0–59) - ''ss'' : Seconds, two digits (00–59)- 'AM/PM Designator' - ''t'' : First character of AM/PM (e.g., A or P) - ''tt'' : AM/PM designator (e.g., AM or PM)- 'Year' - ''y'' : Year, one or two digits (e.g., 0–99) - ''yy'' : Year, two digits (e.g., 00–99) - ''yyy'' : Year, minimum three digits (e.g., 2024) - ''yyyy'' : Year, four digits (e.g., 2024) - ''yyyyy'' : Year, at least five digits (pads with leading zeros if needed)For detailed formatting, custom format strings can be combined as needed, for example: ''yyyy-MM-dd HH:mm:ss'' would display as '2024-04-09 15:45:30'.'Note:' The output may vary according to localization and culture settings unless otherwise specified (e.g., the 'S' format is culture-invariant).string

Specifies the format pattern used to display date and time values. You can use standard built-in format specifiers or custom format strings to control the appearance of the output.

'Built-in Date and Time Format Specifiers:'

| Specifier | Description | Example Output |
|-----------|------------------------------------------|------------------------------------|
| 'd' | Short date pattern | 'M/d/yyyy' (e.g., 4/9/2024) |
| 'D' | Long date pattern | 'dddd, MMMM dd, yyyy' (e.g., Tuesday, April 9, 2024) |
| 't' | Short time pattern | 'h:mm tt' (e.g., 3:45 PM) |
| 'T' | Long time pattern | 'h:mm:ss tt' (e.g., 3:45:30 PM) |
| 'f' | Long date, short time | 'dddd, MMMM dd, yyyy h:mm tt' (e.g., Tuesday, April 9, 2024 3:45 PM) |
| 'F' | Long date, long time | 'dddd, MMMM dd, yyyy h:mm:ss tt' (e.g., Tuesday, April 9, 2024 3:45:30 PM) |
| 'M' | Month/day pattern | 'MMMM dd' (e.g., April 09) |
| 'Y' | Year/month pattern | 'yyyy MMMM' (e.g., 2024 April) |
| 'S' | Sortable, culture-invariant date/time | 'yyyy-MM-ddTHH:mm:ss' (e.g., 2024-04-09T15:45:30) |

'Custom Date and Time Format Strings:'

- 'Day'
- ''d'' : Day of the month (1–31)
- ''dd'' : Day of the month, two digits (01–31)
- ''ddd'' : Abbreviated weekday name (e.g., Tue)
- ''dddd'': Full weekday name (e.g., Tuesday)

- 'Hour'
- ''h'' : 12-hour clock hour (1–12)
- ''hh'' : 12-hour clock hour, two digits (01–12)
- ''H'' : 24-hour clock hour (0–23)
- ''HH'' : 24-hour clock hour, two digits (00–23)

- 'Minute'
- ''m'' : Minutes (0–59)
- ''mm'' : Minutes, two digits (00–59)

- 'Month'
- ''M'' : Month (1–12)
- ''MM'' : Month, two digits (01–12)
- ''MMM'' : Abbreviated month name (e.g., Apr)
- ''MMMM'': Full month name (e.g., April)

- 'Second'
- ''s'' : Seconds (0–59)
- ''ss'' : Seconds, two digits (00–59)

- 'AM/PM Designator'
- ''t'' : First character of AM/PM (e.g., A or P)
- ''tt'' : AM/PM designator (e.g., AM or PM)

- 'Year'
- ''y'' : Year, one or two digits (e.g., 0–99)
- ''yy'' : Year, two digits (e.g., 00–99)
- ''yyy'' : Year, minimum three digits (e.g., 2024)
- ''yyyy'' : Year, four digits (e.g., 2024)
- ''yyyyy'' : Year, at least five digits (pads with leading zeros if needed)

For detailed formatting, custom format strings can be combined as needed, for example: ''yyyy-MM-dd HH:mm:ss'' would display as '2024-04-09 15:45:30'.

'Note:' The output may vary according to localization and culture settings unless otherwise specified (e.g., the 'S' format is culture-invariant).

Default value

"dd-MMM-yy HH:mm:ss.fff"
Try a demo showcasing the formatString property.

Examples

Markup and runtime examples for formatString:

HTML:

<smart-date-time-picker format-string="dddd-MMMM-yyyy"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.formatString = "FP";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const formatString = el.formatString;

headerTemplateDefines a custom header template for the calendar pop-up. You can provide either the string ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section of the calendar's pop-up interface.any

Defines a custom header template for the calendar pop-up. You can provide either the string ID of an HTMLTemplateElement or a direct reference to an HTMLTemplateElement. The specified template will be used to render the header section of the calendar's pop-up interface.

Examples

Markup and runtime examples for headerTemplate:

HTML:

<smart-date-time-picker header-template="headerTemplateId1"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.headerTemplate = "headerTemplate";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const headerTemplate = el.headerTemplate;

hideDayNamesThis option removes or conceals the display of weekday names (such as "Monday," "Tuesday," etc.) from the calendar pop-up, leaving only the days of the month visible to the user.boolean

This option removes or conceals the display of weekday names (such as "Monday," "Tuesday," etc.) from the calendar pop-up, leaving only the days of the month visible to the user.

Default value

false

Examples

Markup and runtime examples for hideDayNames:

HTML attribute:

<smart-date-time-picker hide-day-names></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.hideDayNames = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const hideDayNames = el.hideDayNames;

hideOtherMonthDaysSpecifies whether days from adjacent months (previous or next) are displayed in the calendar pop-up. When enabled, dates that fall outside the currently selected month are shown in the calendar view, typically in a muted or lighter style. Disabling this option will hide these out-of-month days, so only the dates belonging to the current month are visible.boolean

Specifies whether days from adjacent months (previous or next) are displayed in the calendar pop-up. When enabled, dates that fall outside the currently selected month are shown in the calendar view, typically in a muted or lighter style. Disabling this option will hide these out-of-month days, so only the dates belonging to the current month are visible.

Default value

false

Examples

Markup and runtime examples for hideOtherMonthDays:

HTML attribute:

<smart-date-time-picker hide-other-month-days></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.hideOtherMonthDays = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const hideOtherMonthDays = el.hideOtherMonthDays;

hideTooltipArrowPrevents the arrow indicator from being displayed in the calendar tooltip pop-up, resulting in a cleaner appearance without the arrow pointing to the trigger element.boolean

Prevents the arrow indicator from being displayed in the calendar tooltip pop-up, resulting in a cleaner appearance without the arrow pointing to the trigger element.

Default value

false

Examples

Markup and runtime examples for hideTooltipArrow:

HTML attribute:

<smart-date-time-picker hide-tooltip-arrow></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.hideTooltipArrow = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const hideTooltipArrow = el.hideTooltipArrow;

hintDisplays supplementary helper text beneath the element, which becomes visible exclusively when the element is focused. This text is intended to provide contextual guidance or instructions to users as they interact with the element.string

Displays supplementary helper text beneath the element, which becomes visible exclusively when the element is focused. This text is intended to provide contextual guidance or instructions to users as they interact with the element.

Default value

""

Examples

Markup and runtime examples for hint:

HTML:

<smart-date-time-picker hint="Helper text"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.hint = "Hint";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const hint = el.hint;

importantDatesHighlights specific dates in the calendar pop-up, marking them as important to make them stand out visually to users. These dates can be used to indicate special events, deadlines, or other significant occurrences. string[] | Date[]

Highlights specific dates in the calendar pop-up, marking them as important to make them stand out visually to users. These dates can be used to indicate special events, deadlines, or other significant occurrences.

Examples

Markup and runtime examples for importantDates:

HTML:

<smart-date-time-picker important-dates="["2020, 6, 9", "2020-7-30"]"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.importantDates = ["2020-1-2", "2020-2-1"];

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const importantDates = el.importantDates;

importantDatesTemplateDefines the template used to display important dates within the calendar pop-up. This property accepts either the ID of an existing '<template>' element or a direct reference to an 'HTMLTemplateElement' in the DOM. The specified template determines how important dates are rendered inside the calendar interface, allowing for custom formatting and content.string | HTMLTemplateElement

Defines the template used to display important dates within the calendar pop-up. This property accepts either the ID of an existing '<template>' element or a direct reference to an 'HTMLTemplateElement' in the DOM. The specified template determines how important dates are rendered inside the calendar interface, allowing for custom formatting and content.

Examples

Markup and runtime examples for importantDatesTemplate:

HTML:

<smart-date-time-picker important-dates-template="importantDatesTemplateId1"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.importantDatesTemplate = "importantDatesTemplateId2";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const importantDatesTemplate = el.importantDatesTemplate;

intervalDefines or retrieves the time interval used to increment or decrement the value of the date/time input when no specific segment (such as hours, minutes, or seconds) is actively highlighted or selected by the user. By default, this interval is set to 1 second. If you provide a numeric value, it should be specified in milliseconds. For example, passing 500 will set the interval to half a second. This setting determines how quickly the value changes when the user uses controls to adjust the input without a segment highlighted.number | Smart.Utilities.TimeSpan

Defines or retrieves the time interval used to increment or decrement the value of the date/time input when no specific segment (such as hours, minutes, or seconds) is actively highlighted or selected by the user. By default, this interval is set to 1 second. If you provide a numeric value, it should be specified in milliseconds. For example, passing 500 will set the interval to half a second. This setting determines how quickly the value changes when the user uses controls to adjust the input without a segment highlighted.

Default value

new Smart.Utilities.TimeSpan(0, 0, 1)
Try a demo showcasing the interval property.

Examples

Markup and runtime examples for interval:

HTML:

<smart-date-time-picker interval="2000"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.interval = "new Smart.Utilities.TimeSpan(0, 1, 0)";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const interval = el.interval;

labelDisplays a descriptive label above the element to provide context or identify its purpose for users.string

Displays a descriptive label above the element to provide context or identify its purpose for users.

Default value

""

Examples

Markup and runtime examples for label:

HTML:

<smart-date-time-picker label="Helper text"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.label = "Hint";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const label = el.label;

localeSpecifies or retrieves the locale setting that determines the language and regional formatting used to display labels and other text elements within the DateTimePicker. This affects how dates, times, and UI labels are presented to the user, ensuring localization according to the selected language and region.string

Specifies or retrieves the locale setting that determines the language and regional formatting used to display labels and other text elements within the DateTimePicker. This affects how dates, times, and UI labels are presented to the user, ensuring localization according to the selected language and region.

Default value

"en"
Try a demo showcasing the locale property.

Examples

Markup and runtime examples for locale:

HTML:

<smart-date-time-picker locale="de"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.locale = "ja";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const locale = el.locale;

localizeFormatFunctionCallback function that allows you to define a custom formatting for messages returned by the Localization Module. Use this to control how localized messages are structured or displayed before they are delivered to your application.function | null

Callback function that allows you to define a custom formatting for messages returned by the Localization Module. Use this to control how localized messages are structured or displayed before they are delivered to your application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const localizeFormatFunction = el.localizeFormatFunction;

maxSpecifies the maximum permitted value for this property. When set, values greater than this limit are not accepted. When retrieved, returns the current maximum value constraint.Date | Smart.Utilities.DateTime

Specifies the maximum permitted value for this property. When set, values greater than this limit are not accepted. When retrieved, returns the current maximum value constraint.

Default value

new Smart.Utilities.DateTime(3001, 1, 1)

Examples

Markup and runtime examples for max:

HTML:

<smart-date-time-picker max="new Smart.Utilities.DateTime(2050, 10, 30)"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.max = "new Date(2020, 2, 11)";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const max = el.max;

messagesDefines or retrieves an object containing the text strings displayed in the widget, allowing these strings to be customized for different languages or regions. This property works together with the locale setting to enable localization, ensuring that the widget’s UI elements can be translated and adapted to the user’s language preferences.object

Defines or retrieves an object containing the text strings displayed in the widget, allowing these strings to be customized for different languages or regions. This property works together with the locale setting to enable localization, ensuring that the widget’s UI elements can be translated and adapted to the user’s language preferences.

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

"now": "Now",

"dateTabLabel": "DATE",

"timeTabLabel": "TIME"

}

Try a demo showcasing the messages property.

Examples

Markup and runtime examples for messages:

HTML:

<smart-date-time-picker 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.","now":"Jetzt","dateTabLabel":"DATUM","timeTabLabel":"ZEIT"}}"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.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.","now":"Now","dateTabLabel":"DATE","timeTabLabel":"TIME"}};

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const messages = el.messages;

minSpecifies the lowest permissible value that can be assigned. When setting, it defines the minimum value that is valid; when getting, it returns the current minimum constraint applied.Date | Smart.Utilities.DateTime

Specifies the lowest permissible value that can be assigned. When setting, it defines the minimum value that is valid; when getting, it returns the current minimum constraint applied.

Default value

new Smart.Utilities.DateTime(1600, 1, 1)

Examples

Markup and runtime examples for min:

HTML:

<smart-date-time-picker min="new Smart.Utilities.DateTime(2000, 10, 30)"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.min = "new Date(1900, 2, 11)";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const min = el.min;

nameSpecifies or retrieves the value of the element's name attribute. This name is used as the key when the form data is submitted, allowing the server to identify and process the corresponding value for this element.string

Specifies or retrieves the value of the element's name attribute. This name is used as the key when the form data is submitted, allowing the server to identify and process the corresponding value for this element.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-date-time-picker name="dateTimePicker1"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.name = "dateTimePicker2";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const name = el.name;

nullableControls whether the value property can be set to null or an empty string. When this option is enabled and the user deletes the value in the input field, the value property is set to null, causing the placeholder text to be shown. If this option is disabled, deleting the input will automatically set the value property to the current date and time instead of null or an empty string.boolean

Controls whether the value property can be set to null or an empty string. When this option is enabled and the user deletes the value in the input field, the value property is set to null, causing the placeholder text to be shown. If this option is disabled, deleting the input will automatically set the value property to the current date and time instead of null or an empty string.

Default value

false

Examples

Markup and runtime examples for nullable:

HTML attribute:

<smart-date-time-picker nullable></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.nullable = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const nullable = el.nullable;

openedDetermines whether the calendar pop-up is currently open. You can use this property to programmatically open or close the calendar, or to check if it is visible to the user.boolean

Determines whether the calendar pop-up is currently open. You can use this property to programmatically open or close the calendar, or to check if it is visible to the user.

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-date-time-picker opened></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.opened = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const opened = el.opened;

placeholderDefines the placeholder text displayed in the input field when the value property is null. This text provides a visual hint or example to users, indicating the expected input until a value is entered.string

Defines the placeholder text displayed in the input field when the value property is null. This text provides a visual hint or example to users, indicating the expected input until a value is entered.

Default value

"Enter date"
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-date-time-picker placeholder="Please select..."></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.placeholder = "Choose a date";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const placeholder = el.placeholder;

readonlyPrevents users from interacting with the element by disabling all input events, such as clicks, taps, keyboard input, and form submissions. The element will not respond to any user actions while this setting is enabled.boolean

Prevents users from interacting with the element by disabling all input events, such as clicks, taps, keyboard input, and form submissions. The element will not respond to any user actions while this setting is enabled.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-date-time-picker readonly></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const readonly = el.readonly;

restrictedDatesSpecifies or retrieves an array of dates—either as DateTime strings or JavaScript Date objects—that are disabled and cannot be selected by the user. This prevents selection of any date included in the array within the date picker or calendar component. Date[]

Specifies or retrieves an array of dates—either as DateTime strings or JavaScript Date objects—that are disabled and cannot be selected by the user. This prevents selection of any date included in the array within the date picker or calendar component.

Examples

Markup and runtime examples for restrictedDates:

HTML:

<smart-date-time-picker restricted-dates="["new Date(2020, 2, 1)", "new Date(2020, 2, 2)"]"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.restrictedDates = [new Smart.Utilities.DateTime(2000, 1, 1), new Smart.Utilities.DateTime(2010, 1, 1)];

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const restrictedDates = el.restrictedDates;

rightToLeftSets or retrieves a value that specifies whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.boolean

Sets or retrieves a value that specifies whether the element's text direction is set to right-to-left (RTL), enabling proper alignment and display for languages and locales that use right-to-left scripts, such as Arabic or Hebrew.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-date-time-picker right-to-left></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const rightToLeft = el.rightToLeft;

spinButtonsSpecifies whether the spin buttons are visible. Spin buttons allow users to increment or decrement the date or time value by clicking up or down arrows. When enabled, these controls provide a convenient way to adjust the input without manual typing.boolean

Specifies whether the spin buttons are visible. Spin buttons allow users to increment or decrement the date or time value by clicking up or down arrows. When enabled, these controls provide a convenient way to adjust the input without manual typing.

Default value

false
Try a demo showcasing the spinButtons property.

Examples

Markup and runtime examples for spinButtons:

HTML attribute:

<smart-date-time-picker spin-buttons></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.spinButtons = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const spinButtons = el.spinButtons;

spinButtonsDelaySpecifies the time interval, in milliseconds, between consecutive activations of the spin buttons when they are held down. This determines how quickly the value will change while the button is continuously pressed.number

Specifies the time interval, in milliseconds, between consecutive activations of the spin buttons when they are held down. This determines how quickly the value will change while the button is continuously pressed.

Default value

75

Examples

Markup and runtime examples for spinButtonsDelay:

HTML:

<smart-date-time-picker spin-buttons-delay="50"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.spinButtonsDelay = 100;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const spinButtonsDelay = el.spinButtonsDelay;

spinButtonsInitialDelaySpecifies the delay, in milliseconds, before the spin button begins repeating its action after being pressed and held for the first time. This determines how long the user needs to hold down the spin button before subsequent value changes occur automatically.number

Specifies the delay, in milliseconds, before the spin button begins repeating its action after being pressed and held for the first time. This determines how long the user needs to hold down the spin button before subsequent value changes occur automatically.

Default value

0

Examples

Markup and runtime examples for spinButtonsInitialDelay:

HTML:

<smart-date-time-picker spin-buttons-initial-delay="25"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.spinButtonsInitialDelay = 50;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const spinButtonsInitialDelay = el.spinButtonsInitialDelay;

spinButtonsPositionConfigures or retrieves the position of the spin buttons relative to the input field, such as placing them on the left, right, or another specified location. This property allows developers to control the layout and visual alignment of the spin buttons within the component."left" | "right"

Configures or retrieves the position of the spin buttons relative to the input field, such as placing them on the left, right, or another specified location. This property allows developers to control the layout and visual alignment of the spin buttons within the component.

Allowed Values

  • "left" - Positions the buttons on the left side of the element.
  • "right" - Positions the buttons on the right side of the element.

Default value

"right"

Examples

Markup and runtime examples for spinButtonsPosition:

HTML:

<smart-date-time-picker spin-buttons-position="left"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.spinButtonsPosition = "right";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const spinButtonsPosition = el.spinButtonsPosition;

themeDefines or retrieves the element's visual theme, such as its color scheme, style, or appearance, to ensure consistency with the application's overall design.string

Defines or retrieves the element's visual theme, such as its color scheme, style, or appearance, to ensure consistency with the application's overall design.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-date-time-picker theme="material"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.theme = "material-purple";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const theme = el.theme;

tooltipControls whether tooltips are displayed for important dates in the calendar pop-up. When enabled, hovering over an important date shows additional information in a tooltip; when disabled, no tooltip appears.boolean

Controls whether tooltips are displayed for important dates in the calendar pop-up. When enabled, hovering over an important date shows additional information in a tooltip; when disabled, no tooltip appears.

Default value

false

Examples

Markup and runtime examples for tooltip:

HTML attribute:

<smart-date-time-picker tooltip></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.tooltip = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const tooltip = el.tooltip;

tooltipDelaySpecifies the amount of time (in milliseconds) to wait before displaying the tooltip for the calendar pop-up after the user hovers over or focuses on the relevant element.number

Specifies the amount of time (in milliseconds) to wait before displaying the tooltip for the calendar pop-up after the user hovers over or focuses on the relevant element.

Default value

100

Examples

Markup and runtime examples for tooltipDelay:

HTML:

<smart-date-time-picker tooltip-delay="500"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.tooltipDelay = 300;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const tooltipDelay = el.tooltipDelay;

tooltipPositionSpecifies the location where the tooltip will appear relative to the calendar pop-up, such as above, below, to the left, or to the right of the calendar. This setting determines the tooltip’s alignment and positioning when users interact with the calendar interface."auto" | "absolute" | "bottom" | "top" | "left" | "right"

Specifies the location where the tooltip will appear relative to the calendar pop-up, such as above, below, to the left, or to the right of the calendar. This setting determines the tooltip’s alignment and positioning when users interact with the calendar interface.

Allowed Values

  • "auto" - The tooltip automatically positions itself in order to be visible.
  • "absolute" - Allows the tooltip to be positioned via custom CSS. By default in this mode the tooltip doesn't have any specific positioning.
  • "bottom" - Positions the tooltip below the important date.
  • "top" - Positions the tooltip above the important date.
  • "left" - Positions the tooltip to the left of the important date.
  • "right" - Positions the tooltip to the right of the important date.

Default value

"top"

Examples

Markup and runtime examples for tooltipPosition:

HTML:

<smart-date-time-picker tooltip-position="left"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.tooltipPosition = "right";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const tooltipPosition = el.tooltipPosition;

tooltipTemplateDefines a custom template for the tooltip content displayed in the calendar pop-up. This property accepts either the ID of an HTML <template> element or a direct reference to an HTMLTemplateElement. The specified template will be used to render the tooltip, allowing for customized layout and content in the calendar interface.string | HTMLTemplateElement

Defines a custom template for the tooltip content displayed in the calendar pop-up. This property accepts either the ID of an HTML <template> element or a direct reference to an HTMLTemplateElement. The specified template will be used to render the tooltip, allowing for customized layout and content in the calendar interface.

Examples

Markup and runtime examples for tooltipTemplate:

HTML:

<smart-date-time-picker tooltip-template="tooltipTemplateId1"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.tooltipTemplate = "tooltipTemplateId2";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const tooltipTemplate = el.tooltipTemplate;

unfocusableDetermines whether the element can receive keyboard focus, allowing users to interact with it using the Tab key or other navigation methods. This property can be used to enable or disable focusability programmatically. When set, it also allows you to check if the element is currently focusable.boolean

Determines whether the element can receive keyboard focus, allowing users to interact with it using the Tab key or other navigation methods. This property can be used to enable or disable focusability programmatically. When set, it also allows you to check if the element is currently focusable.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-date-time-picker unfocusable></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const unfocusable = el.unfocusable;

unlockKeySets or retrieves the unlockKey, a unique key required to activate or access the product's features. When provided, the unlockKey enables the user to unlock and use the product.string

Sets or retrieves the unlockKey, a unique key required to activate or access the product's features. When provided, the unlockKey enables the user to unlock and use the product.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-date-time-picker unlock-key=""></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const unlockKey = el.unlockKey;

validationSpecifies the validation method that enforces minimum and maximum value constraints. This determines how the input value is checked to ensure it falls within the defined minimum and maximum range."strict" | "interaction"

Specifies the validation method that enforces minimum and maximum value constraints. This determines how the input value is checked to ensure it falls within the defined minimum and maximum range.

Allowed Values

  • "strict" - In this mode the value is always validated by min and max.
  • "interaction" - In this mode programmatic value changes are not coerced to min/max and if min/max are changed, resulting in the current value being out of range, the value is not coerced, and no change event is fired.

Default value

"strict"

Examples

Markup and runtime examples for validation:

HTML:

<smart-date-time-picker validation="left"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.validation = "right";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const validation = el.validation;

valueSets or retrieves the value of the element. This value represents the current date and time associated with the element, stored as a DateTime object. When setting the value, you provide a DateTime object to update the element’s date and time. When getting the value, it returns the currently assigned DateTime object reflecting the element’s date and time.Date | Smart.Utilities.DateTime

Sets or retrieves the value of the element. This value represents the current date and time associated with the element, stored as a DateTime object. When setting the value, you provide a DateTime object to update the element’s date and time. When getting the value, it returns the currently assigned DateTime object reflecting the element’s date and time.

Default value

new Smart.Utilities.DateTime()
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-date-time-picker value="new Date(2018, 2, 11)"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.value = "new Smart.Utilities.DateTime(2020, 10, 30)";

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const value = el.value;

weekNumbersControls whether week numbers are displayed in the calendar pop-up. When enabled, a numerical label appears next to each week, making it easier for users to reference specific weeks. When disabled, these week numbers will not be shown.boolean

Controls whether week numbers are displayed in the calendar pop-up. When enabled, a numerical label appears next to each week, making it easier for users to reference specific weeks. When disabled, these week numbers will not be shown.

Default value

false

Examples

Markup and runtime examples for weekNumbers:

HTML attribute:

<smart-date-time-picker week-numbers></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.weekNumbers = false;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const weekNumbers = el.weekNumbers;

weeksSpecifies how many weeks are displayed at once in the calendar pop-up view, allowing you to control the visible portion of the calendar grid when it is opened. Adjusting this value changes the number of week rows shown to the user.number

Specifies how many weeks are displayed at once in the calendar pop-up view, allowing you to control the visible portion of the calendar grid when it is opened. Adjusting this value changes the number of week rows shown to the user.

Default value

6

Examples

Markup and runtime examples for weeks:

HTML:

<smart-date-time-picker weeks="2"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.weeks = 1;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const weeks = el.weeks;

yearCutoffSpecifies the starting year of a 100-year range used to interpret 2-digit year values. By default, this is set to 1926, meaning that 2-digit years from 26 to 99 will be mapped to the years 1926 to 1999, and 2-digit years from 00 to 25 will be interpreted as 2000 to 2025. This setting ensures that legacy 2-digit year inputs are correctly converted to their corresponding 4-digit year representations within the defined century span.number

Specifies the starting year of a 100-year range used to interpret 2-digit year values. By default, this is set to 1926, meaning that 2-digit years from 26 to 99 will be mapped to the years 1926 to 1999, and 2-digit years from 00 to 25 will be interpreted as 2000 to 2025. This setting ensures that legacy 2-digit year inputs are correctly converted to their corresponding 4-digit year representations within the defined century span.

Default value

1926

Examples

Markup and runtime examples for yearCutoff:

HTML:

<smart-date-time-picker year-cutoff="1950"></smart-date-time-picker>

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

const el = document.querySelector('smart-date-time-picker');
el.yearCutoff = 2000;

Read the current value:

const el = document.querySelector('smart-date-time-picker');
const yearCutoff = el.yearCutoff;

Events

changeThis event is triggered whenever the value associated with the component or input field is modified by the user or programmatically. It activates each time a change is detected, allowing you to respond to updates in real-time, such as validating input, updating UI elements, or saving new data.CustomEvent

This event is triggered whenever the value associated with the component or input field is modified by the user or programmatically. It activates each time a change is detected, allowing you to respond to updates in real-time, such as validating input, updating UI elements, or saving new data.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The old value before it was changed presented as a DateTime object.
ev.detail.value - The new value presented as a DateTime object.

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.

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-date-time-picker')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

closeThis event is triggered when the calendar pop-up is closed by the user, either by selecting a date or dismissing the pop-up through other means (such as clicking outside the calendar or pressing the Escape key).CustomEvent

This event is triggered when the calendar pop-up is closed by the user, either by selecting a date or dismissing the pop-up through other means (such as clicking outside the calendar or pressing the Escape key).

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-date-time-picker')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

closingThis event is fired immediately before the calendar pop-up is closed. At this stage, event handlers have the opportunity to intercept the closing action. If you want to prevent the calendar from closing—for example, to validate user input or display a confirmation message—you can call event.preventDefault() within your event handler. Doing so will cancel the close operation, keeping the calendar pop-up open until the condition is resolved.CustomEvent

This event is fired immediately before the calendar pop-up is closed. At this stage, event handlers have the opportunity to intercept the closing action. If you want to prevent the calendar from closing—for example, to validate user input or display a confirmation message—you can call event.preventDefault() within your event handler. Doing so will cancel the close operation, keeping the calendar pop-up open until the condition is resolved.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Examples

Listen for closing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-date-time-picker')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

openThis event is triggered whenever the calendar pop-up component becomes visible to the user, such as when a user clicks on the input field or calendar icon to display the calendar interface.CustomEvent

This event is triggered whenever the calendar pop-up component becomes visible to the user, such as when a user clicks on the input field or calendar icon to display the calendar interface.

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

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Examples

Listen for open using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-date-time-picker')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

openingThis event fires immediately before the calendar pop-up is displayed to the user. Developers can intercept this event and prevent the calendar from opening by invoking event.preventDefault() within the event handler. This allows for custom validation or logic to be executed prior to showing the calendar interface.CustomEvent

This event fires immediately before the calendar pop-up is displayed to the user. Developers can intercept this event and prevent the calendar from opening by invoking event.preventDefault() within the event handler. This allows for custom validation or logic to be executed prior to showing the calendar interface.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Examples

Listen for opening using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-date-time-picker')?.addEventListener('opening', (event) => {
	// event handling code goes here.
})

Methods

close(): voidTriggers the closure of the calendar pop-up window, removing it from view and returning focus to the primary interface.

Triggers the closure of the calendar pop-up window, removing it from view and returning focus to the primary interface.

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

document.querySelector('smart-date-time-picker')?.close();

focus(): voidSets the keyboard focus to the input field, allowing users to immediately begin typing without needing to click on the input. This improves usability by enabling faster and more intuitive data entry.

Sets the keyboard focus to the input field, allowing users to immediately begin typing without needing to click on the input. This improves usability by enabling faster and more intuitive data entry.

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

document.querySelector('smart-date-time-picker')?.focus();

getDate(): dateRetrieves and returns a JavaScript Date object representing a specific point in time.

Retrieves and returns a JavaScript Date object representing a specific point in time.

Returnsdate

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

const result = document.querySelector('smart-date-time-picker')?.getDate();

open(): voidDisplays the calendar pop-up, allowing users to select a date from an interactive calendar interface.

Displays the calendar pop-up, allowing users to select a date from an interactive calendar interface.

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

document.querySelector('smart-date-time-picker')?.open();

select(): voidAutomatically highlights all the text contained within the input field, allowing users to easily copy, cut, or overwrite the current content.

Automatically highlights all the text contained within the input field, allowing users to easily copy, cut, or overwrite the current content.

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

document.querySelector('smart-date-time-picker')?.select();

setDate( date: Date): voidSpecifies the selected date to be displayed and managed by the DateTimePicker component. Setting this value determines the currently chosen date shown in the picker interface.

Specifies the selected date to be displayed and managed by the DateTimePicker component. Setting this value determines the currently chosen date shown in the picker interface.

Arguments

dateDate

The date object to be set.

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

document.querySelector('smart-date-time-picker')?.setDate("2022-03-01");

CSS Variables

--smart-date-time-picker-default-widthvar()

Default value

"var(--smart-editor-width)"

smartDateTimePicker default width

--smart-date-time-picker-default-heightvar()

Default value

"var(--smart-editor-height)"

smartDateTimePicker default height

--smart-date-time-picker-header-opacityvar()

Default value

"0.8"

Opacity of header elements

--smart-date-time-picker-header-opacity-activevar()

Default value

"1"

Opacity of header elements when selected