DateTimePicker API

DateTimePicker Javascript API

Class

DateTimePicker

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

Selector

smart-date-time-picker

Properties

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

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

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;

autoCloseDelayboolean

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

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.

Default value

"right"

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.

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.

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.

Default value

"unspecified"

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.

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;

dropDownAppendToany

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.

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

Default value

"default"

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.

Default value

"auto"

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.

Default value

"default"

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

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;

formatStringstring

Determines the pattern that is used to display the value in.

Default value

"dd-MMM-yy HH:mm:ss.fff"

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

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)

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"

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

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

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.

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.

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.

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

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

evEvent
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

evEvent

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

evEvent

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

evEvent

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

evEvent

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-datetimepicker');
datetimepicker.close(false);

focus(): void

Focuses the input.


Invoke the focus method.

const datetimepicker = document.querySelector('smart-datetimepicker');
datetimepicker.focus(false);

open(): void

Opens the calendar pop-up.


Invoke the open method.

const datetimepicker = document.querySelector('smart-datetimepicker');
datetimepicker.open(false);

select(): void

Selects the text inside the input.


Invoke the select method.

const datetimepicker = document.querySelector('smart-datetimepicker');
datetimepicker.select(false);