DateTimePicker JAVASCRIPT UI Component API

DateTimePicker Javascript API

Class

DateTimePicker

DateTimePicker

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

Selector

smart-date-time-picker

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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
GgetDateRetrieves and returns a JavaScript Date object representing a specific point in time.
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

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

Example

Set the animation property. 

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

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

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

Get the animation property. 

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

animationSettingsobject

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.

Example

Set the animationSettings property. 

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

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

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

Get the animationSettings property. 

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

autoCloseboolean

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

Example

Set the autoClose property. 

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

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

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

Get the autoClose property. 

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

autoCloseDelaynumber

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

Example

Set the autoCloseDelay property. 

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

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

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

Get the autoCloseDelay property. 

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

calendarButtonboolean

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.

Example

Set the calendarButton property. 

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

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

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

Get the calendarButton property. 

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

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

Example

Set the calendarButtonPosition property. 

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

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

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

Get the calendarButtonPosition property. 

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

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

Example

Set the calendarMode property. 

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

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

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

Get the calendarMode property. 

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

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

Example

Set the dayNameFormat property. 

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

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

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

Get the dayNameFormat property. 

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

disabledboolean

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

Example

Set the disabled property. 

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

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

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

Get the disabled property. 

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

disableAutoNavigationboolean

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

Example

Set the disableAutoNavigation property. 

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

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

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

Get the disableAutoNavigation property. 

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

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

Example

Set the displayKind property. 

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

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

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

Get the displayKind property. 

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

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

Example

Set the displayModeView property. 

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

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

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

Get the displayModeView property. 

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

dropDownAppendTostring

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"

Example

Set the dropDownAppendTo property. 

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

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

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

Get the dropDownAppendTo property. 

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

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

Example

Set the dropDownDisplayMode property. 

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

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

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

Get the dropDownDisplayMode property. 

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

dropDownOverlayboolean

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

Example

Set the dropDownOverlay property. 

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

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

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

Get the dropDownOverlay property. 

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

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

Example

Set the dropDownPosition property. 

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

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

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

Get the dropDownPosition property. 

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

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

Example

Set the editMode property. 

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

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

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

Get the editMode property. 

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

enableMouseWheelActionboolean

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.

Example

Set the enableMouseWheelAction property. 

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

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

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

Get the enableMouseWheelAction property. 

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

firstDayOfWeeknumber

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

Example

Set the firstDayOfWeek property. 

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

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

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

Get the firstDayOfWeek property. 

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

footerTemplateany

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.

Example

Set the footerTemplate property. 

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

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

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

Get the footerTemplate property. 

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

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.

Example

Set the footer property. 

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

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

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

Get the footer property. 

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

formatStringstring

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.

Example

Set the formatString property. 

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

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

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

Get the formatString property. 

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

headerTemplateany

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.

Example

Set the headerTemplate property. 

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

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

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

Get the headerTemplate property. 

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

hideDayNamesboolean

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

Example

Set the hideDayNames property. 

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

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

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

Get the hideDayNames property. 

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

hideOtherMonthDaysboolean

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

Example

Set the hideOtherMonthDays property. 

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

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

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

Get the hideOtherMonthDays property. 

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

hideTooltipArrowboolean

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

Example

Set the hideTooltipArrow property. 

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

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

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

Get the hideTooltipArrow property. 

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

hintstring

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

""

Example

Set the hint property. 

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

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

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

Get the hint property. 

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

importantDatesstring[] | 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.

Example

Set the importantDates property. 

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

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

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

Get the importantDates property. 

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

importantDatesTemplatestring | 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.

Example

Set the importantDatesTemplate property. 

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

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

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

Get the importantDatesTemplate property. 

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

intervalnumber | 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.

Example

Set the interval property. 

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

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

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

Get the interval property. 

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

labelstring

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

Default value

""

Example

Set the label property. 

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

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

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

Get the label property. 

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

unlockKeystring

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

""

Example

Set the unlockKey property. 

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

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

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

Get the unlockKey property. 

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

localestring

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.

Example

Set the locale property. 

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

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

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

Get the locale property. 

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

localizeFormatFunctionfunction | 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.

Example

Set the localizeFormatFunction property. 

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

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

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

Get the localizeFormatFunction property. 

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

maxDate | 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)

Example

Set the max property. 

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

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

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

Get the max property. 

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

messagesobject

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"

}

Example

Set the messages property. 

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

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

 const datetimepicker = document.querySelector('smart-date-time-picker');
 datetimepicker.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"}};

Get the messages property. 

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

minDate | 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)

Example

Set the min property. 

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

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

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

Get the min property. 

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

namestring

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

""

Example

Set the name property. 

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

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

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

Get the name property. 

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

nullableboolean

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

Example

Set the nullable property. 

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

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

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

Get the nullable property. 

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

openedboolean

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

Example

Set the opened property. 

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

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

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

Get the opened property. 

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

placeholderstring

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"

Example

Set the placeholder property. 

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

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

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

Get the placeholder property. 

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

readonlyboolean

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

Example

Set the readonly property. 

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

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

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

Get the readonly property. 

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

restrictedDatesDate[]

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.

Example

Set the restrictedDates property. 

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

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

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

Get the restrictedDates property. 

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

rightToLeftboolean

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.

Example

Set the rightToLeft property. 

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

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

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

Get the rightToLeft property. 

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

spinButtonsboolean

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.

Example

Set the spinButtons property. 

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

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

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

Get the spinButtons property. 

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

spinButtonsDelaynumber

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

Example

Set the spinButtonsDelay property. 

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

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

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

Get the spinButtonsDelay property. 

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

spinButtonsInitialDelaynumber

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

Example

Set the spinButtonsInitialDelay property. 

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

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

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

Get the spinButtonsInitialDelay property. 

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

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

Example

Set the spinButtonsPosition property. 

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

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

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

Get the spinButtonsPosition property. 

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

themestring

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

""

Example

Set the theme property. 

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

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

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

Get the theme property. 

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

tooltipboolean

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

Example

Set the tooltip property. 

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

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

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

Get the tooltip property. 

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

tooltipDelaynumber

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

Example

Set the tooltipDelay property. 

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

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

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

Get the tooltipDelay property. 

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

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

Example

Set the tooltipPosition property. 

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

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

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

Get the tooltipPosition property. 

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

tooltipTemplatestring | 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.

Example

Set the tooltipTemplate property. 

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

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

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

Get the tooltipTemplate property. 

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

unfocusableboolean

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

Example

Set the unfocusable property. 

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

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

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

Get the unfocusable property. 

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

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

Example

Set the validation property. 

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

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

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

Get the validation property. 

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

valueDate | 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.

Example

Set the value property. 

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

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

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

Get the value property. 

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

weekNumbersboolean

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

Example

Set the weekNumbers property. 

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

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

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

Get the weekNumbers property. 

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

weeksnumber

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

Example

Set the weeks property. 

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

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

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

Get the weeks property. 

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

yearCutoffnumber

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

Example

Set the yearCutoff property. 

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

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

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

Get the yearCutoff property. 

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

Events

changeCustomEvent

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.

Example

Set up the event handler of change event. 

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

	// event handling code goes here.
})

closeCustomEvent

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.

Example

Set up the event handler of close event. 

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

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.

Example

Set up the event handler of closing event. 

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.addEventListener('closing', function (event) {
	// event handling code goes here.
})

openCustomEvent

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.

Example

Set up the event handler of open event. 

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

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.

Example

Set up the event handler of opening event. 

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.addEventListener('opening', function (event) {
	// event handling code goes here.
})

Methods

close(): void

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


Invoke the close method.

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.close();

focus(): void

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.


Invoke the focus method.

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.focus();

open(): void

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


Invoke the open method.

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.open();

select(): void

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


Invoke the select method.

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.select();

getDate(): date

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

Returnsdate

Invoke the getDate method.

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

setDate( date: Date): void

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.


Invoke the setDate method.

const datetimepicker = document.querySelector('smart-date-time-picker');
datetimepicker.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