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

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AanimationSettingsApplies new animation settings to the calendar pop-up when it is enabled. Properties:startSpeed - Determines the initial speed of the animation.easeThreshold - Determines the point at which the animation starts to slow down - the "ease effect".step - Determines the step ( scrolling interval ) at which the animation will run. stepEaseSize - Coefficient that is used to calculated the new step once the threshold has been passed. resetThreshold - Determines the threshold for animation reset. When it's reached the animation will start over.
AautoCloseDetermines whether the calendar button pop-up will be closed automatically when date or time is selected through it.
AautoCloseDelayDetermines the delay before the calendar pop-up is automatically closed. Applicable only when autoClose is set to true.
CcalendarButtonDetermines whether the calendar button is visible or not. The calendar button is used to open the Calendar popup to select a date.
CcalendarButtonPositionDetermines the position of the calendar button.
CcalendarModeDetermines the header mode of the calendar pop-up.
DdayNameFormatSets or gets the format of calendar pop-up's day names.
DdisabledEnables or disables the element.
DdisableAutoNavigationDisables auto navigation of the calendar pop-up when the user clicks on a date that's not from month in view.
DdisplayKindDetermines the time zone to display the value in.
DdisplayModeViewDetermines the type of the month/year view in the calendar pop-up when calendarMode is set to Default.
DdropDownAppendToSets custom container to append the pop-up to. By default, it is in the DateTimePicker. The value of the property can be an HTML element or the id of an HTML element.
DdropDownDisplayModeSets or gets the pop-up display mode (what components appear in it, and its behaviour).
DdropDownOverlayIf this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.
DdropDownPositionDetermines the pop-up position when opened.
EeditModeDetermines how the the value can be edited inside the input.
EenableMouseWheelActionDetermines whether the value can be incremented/decremented with the mouse wheel when the mouse is over the input.
FfirstDayOfWeekDetermines the first day of the week of the calendar pop-up. From 0(Sunday) to 6(Saturday)
FfooterTemplateSets or gets the footer template of the calendar pop-up. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, a default template is applied.
FfooterDetermines whether to display a footer.
FformatStringDetermines the pattern that is used to display the value in. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
HheaderTemplateSets custom header template for the calendar pop-up. Accepts the id of an HTMLTemplateElement or a reference ot it.
HhideDayNamesHides the names of the weekdays in the calendar pop-up.
HhideOtherMonthDaysDetermines if dates from other months are visible or not in the calendar pop-up.
HhideTooltipArrowHides the arrow of the tooltip in the calendar pop-up.
HhintSets additional helper text below the element that appears only when the element is focused.
IimportantDatesSets dates, displayed as important in the calendar pop-up.
IimportantDatesTemplateSets a template for the important dates of the calendar pop-up. Accepts the id of or a reference to an HTMLTemplateElement.
IintervalSets or gets the increment/decrement interval when a date/time segment inside the input has not been highlighted. The default interval is 1 second. If a numeric value is passed, it represents milliseconds.
LlabelSets a label above the element.
LlocaleSets or gets the locale that determines what language is used to localize the labels inside the DateTimePicker.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmaxSets or gets the maximum allowed value.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminSets or gets the minimum allowed value.
NnameSets or gets the element's name, which is used as a reference when the data is submitted in a form.
NnullableEnables or disables the setting of the value property to be null or empty string. If the property is enabled and the value in the input is deleted, the value will be set to null and the placeholder will be displayed. Otherwise, the current date and time will be set.
OopenedSets or gets whether the calendar pop-up is opened.
PplaceholderSets or gets the placeholder text to be shown in the input when value is null.
RreadonlyDisables user interaction with the element.
RrestrictedDatesSets or gets an array of dates (DateTime or Date objects) that cannot be selected.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SspinButtonsSets or gets whether the spin buttons are displayed. Spin buttons are used to increment/decrement the date/time.
SspinButtonsDelaySets the delay between repeats of the spin buttons in miliseconds.
SspinButtonsInitialDelaySets a delay before the first repeat iteration of spin buttons in miliseconds.
SspinButtonsPositionSets or gets the position of the spin buttons.
TthemeSets or gets the element's visual theme.
TtooltipEnables/Disabled the tooltip for the important dates in the calendar pop-up.
TtooltipDelaySets the delay of the calendar pop-up's tooltip before it appears.
TtooltipPositionSets the position of the tooltip in the calendar pop-up.
TtooltipTemplateSets a template for the content of the calendar pop-up's tooltip. Accepts the id of or a reference to an HTMLTemplateElement.
UunfocusableSets or gets if the element can be focused.
VvalidationDetermines the validation mechanism for the value by min/max.
VvalueSets or gets the value. The value represents the current date/time that is set to the element as a DateTime object.
WweekNumbersEnables/Disabled week numbering in the calendar pop-up.
WweeksDetermines the number of visible weeks in the calendar pop-up.
YyearCutoffDetermines the first year of a 100 year span within which 2-digit years fall. The default value, 1926, would interpret the 2-digit year values 26-99 as 1926 to 1999 and values 00-25 as being 2000 to 2025.

Events

CchangeThis event is triggered when the value is changed.
CcloseThis event is triggered when the calendar pop-up is closed.
CclosingThis event is triggered when the calendar pop-up is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.
OopenThis event is triggered when the calendar pop-up is opened.
OopeningThis event is triggered when the calendar pop-up is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

Methods

CcloseCloses the calendar pop-up.
FfocusFocuses the input.
OopenOpens the calendar pop-up.
SselectSelects the text inside the input.
GgetDateGets a Date object.
SsetDateSets the date of the DateTimePicker.

Properties

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

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

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

Applies new animation settings to the calendar pop-up when it is enabled.

Properties:
startSpeed - Determines the initial speed of the animation.
easeThreshold - Determines the point at which the animation starts to slow down - the "ease effect".
step - Determines the step ( scrolling interval ) at which the animation will run.
stepEaseSize - Coefficient that is used to calculated the new step once the threshold has been passed.
resetThreshold - Determines the threshold for animation reset. When it's reached the animation will start over.

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

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

Default value

false

Example

Set the autoClose property. 

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

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

Default value

500

Example

Set the autoCloseDelay property. 

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

Determines whether the calendar button is visible or not. The calendar button is used to open the Calendar popup to select a date.

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"

Determines the position of the calendar button.

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"

Determines the header mode of the calendar pop-up.

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"

Sets or gets the format of calendar pop-up's day names.

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

Enables or disables the element.

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

Disables auto navigation of the calendar pop-up when the user clicks on a date that's not from month in view.

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"

Determines the time zone to display the value in.

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"

Determines the type of the month/year view in the calendar pop-up when calendarMode is set to Default.

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

Sets custom container to append the pop-up to. By default, it is in the DateTimePicker. The value of the property can be an HTML element or the id of an HTML element.

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"

Sets or gets the pop-up display mode (what components appear in it, and its behaviour).

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

If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.

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"

Determines the pop-up position when opened.

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"

Determines how the the value can be edited inside the input.

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

Determines whether the value can be incremented/decremented with the mouse wheel when the mouse is over the input.

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

Determines the first day of the week of the calendar pop-up. From 0(Sunday) to 6(Saturday)

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

Sets or gets the footer template of the calendar pop-up. The value of this property can be the id of an HTMLTemplateElement or the HTMLTemplateElement itself. If set to null, a default template is applied.

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;

Determines whether to display a footer.

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

Determines the pattern that is used to display the value in. Built-in Date formats:
// short date pattern
'd' - 'M/d/yyyy',
// long date pattern
'D' - 'dddd, MMMM dd, yyyy',
// short time pattern
't' - 'h:mm tt',
// long time pattern
'T' - 'h:mm:ss tt',
// long date, short time pattern
'f' - 'dddd, MMMM dd, yyyy h:mm tt',
// long date, long time pattern
'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',
// month/day pattern
'M' - 'MMMM dd',
// month/year pattern
'Y' - 'yyyy MMMM',
// S is a sortable format that does not vary by culture
'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'

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

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

Default value

"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

Sets custom header template for the calendar pop-up. Accepts the id of an HTMLTemplateElement or a reference ot it.

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

Hides the names of the weekdays in the calendar pop-up.

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

Determines if dates from other months are visible or not in the calendar pop-up.

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

Hides the arrow of the tooltip in the calendar pop-up.

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

Sets additional helper text below the element that appears only when the element is focused.

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

Sets dates, displayed as important in the calendar pop-up.

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

Sets a template for the important dates of the calendar pop-up. Accepts the id of or a reference to an HTMLTemplateElement.

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

Sets or gets the increment/decrement interval when a date/time segment inside the input has not been highlighted. The default interval is 1 second. If a numeric value is passed, it represents milliseconds.

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

Sets a label above the element.

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;

localestring

Sets or gets the locale that determines what language is used to localize the labels inside the DateTimePicker.

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 used to customize the format of the messages that are returned from the Localization Module.

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

Sets or gets the maximum allowed value.

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

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

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

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

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

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

"moduleUndefined": "Module is undefined.",

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

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

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

"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

Sets or gets the minimum allowed value.

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

Sets or gets the element's name, which is used as a reference when the data is submitted in a form.

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

Enables or disables the setting of the value property to be null or empty string. If the property is enabled and the value in the input is deleted, the value will be set to null and the placeholder will be displayed. Otherwise, the current date and time will be set.

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

Sets or gets whether the calendar pop-up is opened.

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

Sets or gets the placeholder text to be shown in the input when value is null.

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

Disables user interaction with the element.

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

Sets or gets an array of dates (DateTime or Date objects) that cannot be selected.

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 gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

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

Sets or gets whether the spin buttons are displayed. Spin buttons are used to increment/decrement the date/time.

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

Sets the delay between repeats of the spin buttons in miliseconds.

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

Sets a delay before the first repeat iteration of spin buttons in miliseconds.

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"

Sets or gets the position of the spin buttons.

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

Sets or gets the element's visual theme.

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

Enables/Disabled the tooltip for the important dates in the calendar pop-up.

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

Sets the delay of the calendar pop-up's tooltip before it appears.

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"

Sets the position of the tooltip in the calendar pop-up.

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

Sets a template for the content of the calendar pop-up's tooltip. Accepts the id of or a reference to an HTMLTemplateElement.

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

Sets or gets if the element can be focused.

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"

Determines the validation mechanism for the value by min/max.

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 gets the value. The value represents the current date/time that is set to the element as a DateTime object.

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

Enables/Disabled week numbering in the calendar pop-up.

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

Determines the number of visible weeks in the calendar pop-up.

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

Determines the first year of a 100 year span within which 2-digit years fall. The default value, 1926, would interpret the 2-digit year values 26-99 as 1926 to 1999 and values 00-25 as being 2000 to 2025.

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 when the value is changed.

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

  • 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 triggered when the calendar pop-up is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

  • 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 when the calendar pop-up is opened.

  • 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 is triggered when the calendar pop-up is about to be opened. The opening operation can be canceled by calling event.preventDefault() in the event handler function.

  • 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

Closes the calendar pop-up.


Invoke the close method.

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

focus(): void

Focuses the input.


Invoke the focus method.

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

open(): void

Opens the calendar pop-up.


Invoke the open method.

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

select(): void

Selects the text inside the input.


Invoke the select method.

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

getDate(): date

Gets a Date object.

Returnsdate

Invoke the getDate method.

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

setDate( date: Date): void

Sets the date of the DateTimePicker.

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