Overview

Smart.DateTimePicker represents a custom element which can be used to select and display date and time data.

To initialize a date time picker element the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element.
  • smart.element.js – the base class.
  • smart.button.js – the JS file containing the definition for the buttons used for month navigation.
  • smart.scrollbar.js – the JS file containing the definition for the scrollbars inside the listBox that’s part of the date picker.
  • smart.listbox.js – the JS file containing the definition for the list box element used in the date picker.
  • smart.dropdownlist.js – the JS file containing the definition for the drop down list element used in the date picker.
  • smart.calendar.js – the JS file containing the definition for the date picker.
  • smart.math.js – the JS file containing the definition for the Math operations used in the time picker.
  • smart.numeric.js – the JS file containing the necessary for the time picker.
  • smart.timepicker.js – the JS file containing the definition for the time picker.
  • smart.datetimepicker.js – the JS file containing the element definition.

Here’s how to initialize a simple dateTimePicker element:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.date.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.math.js"></script> <script type="text/javascript" src="../../source/smart.numeric.js"></script> <script type="text/javascript" src="../../source/smart.timepicker.js"></script> <script type="text/javascript" src="../../source/smart.draw.js"></script> <script type="text/javascript" src="../../source/smart.datetimepicker.js"></script> </head> <body> <smart-date-time-picker></smart-date-time-picker> </body> </html>

Demo

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

By default Smart.DateTimePicker appears as a simple date time input. The user has to enable the popup button for the date/time picker, the navigation buttons and etc.

All available settings are listed in the API documentation of the element.

The date time picker can easily be transformed from a simple input into a drop down with date and time pickers. This can be done by simply applying a few properties:

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

Demo

The properties are self-describing:

  • calendar-button – enables the button for the drop down date/time picker.
  • spin-buttons – enables the buttons used to calibrate the date/time in the input.
  • spin-buttons-position – sets the position of the spin buttons.

Smart.DateTimePicker like the other Smart inputs has a label and a hint property. Positioned above and below the input field respectively, the fields that represent those properties serve as text lables that the user can modify to fit his needs. Here’s how to apply them:

<smart-date-time-picker label="Date input:" hint="Calendar buttons is disabled"></smart-date-time-picker>

Demo

They can be changed after the element is ready using javascript.

Behavior

Smart.DateTimePicker can behave like a time picker, date picker or both.

dropDownDisplayMode property determines this behavior:

<smart-date-time-picker calendar-button drop-down-display-mode="timePicker" ></smart-date-time-picker>

Demo

The possible values are:

  • default – the drop down popup behaves like a tab control with two separate tabs: Date and Time.
  • classic – Time and Date pickers are combined into one in the drop down popup.
  • calendar – the drop down popup contains only a date picker – a Calendar.
  • timePicker – the drop down popup contains only a time picker – a TimePicker.

The user can edit the date or time directly in the input field. What part of the date/time can be edited depends on the editMode property. The user can prefer to edit fixed parts of the date/time string.

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

Demo

Smart.DateTimePicker supports different date/time input formats.The formatString property determines the format of the date/time string. It can be changed in the HTML tag on initialization or later using javascript:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.date.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.timepicker.js"></script> <script type="text/javascript" src="../../source/smart.numeric.js"></script> <script type="text/javascript" src="../../source/smart.math.js"></script> <script type="text/javascript" src="../../source/smart.draw.js"></script> <script type="text/javascript" src="../../source/smart.datetimepicker.js"></script> <script type="text/javascript"> window.onload = function () { var dateTimePicker = document.getElementsByTagName('smart-date-time-picker')[0]; //Default format dateTimePicker.formatString = 'dd-MMM-yy HH:mm:ss.fff'; //Short date format dateTimePicker.formatString = 'd'; //Custom date format dateTimePicker.formatString = 'dddd-MMMM-yyyy'; } </script> </head> <body> <smart-date-time-picker></smart-date-time-picker> </body> </html>

Demo

The format of the date/time string can be standardized or custom.


Smart.DateTimePicker uses a Smart.Calendar as a date picker and Smart.TimePicker as a time picker.

Keyboard Support

Smart.DateTimePicker implements the following keys:

Key Action
Arrow Up / Arrow Down Increases/Decreases the selected date/time by one or moves the caret to the begining or the end ( depends on the editMode ).
Arrow Left / Arrow Right Navigate to the previous/next selection or moves the caret forward ( depends on the editMode ).
Home Selects the first item from the date/time input or sets the caret to the beggining ( depends on the editMode ).
End Selects the last item from the date/time input or sets the caret to the end ( depends on the editMode ).

Styling

smartDropDownList uses the following CSS variables for styling:

  • –smart-date-time-picker-calendar-button-width — used to set the width of the calendar button of the element. Default value is 30px
  • –smart-date-time-picker-spin-buttons-width — used to set the width of the spin buttons container of the element.
  • –smart-date-time-picker-drop-down-width — used to set the width of the calendar pop-up. Default value is 250px.
  • –smart-date-time-picker-drop-down-height — used to set the height of the calendar pop-up. Default value is 275px.

Here’s how to apply the variables:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="./../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.date.js"></script> <script type="text/javascript" src="../../source/smart.calendar.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.timepicker.js"></script> <script type="text/javascript" src="../../source/smart.numeric.js"></script> <script type="text/javascript" src="../../source/smart.math.js"></script> <script type="text/javascript" src="../../source/smart.draw.js"></script> <script type="text/javascript" src="../../source/smart.datetimepicker.js"></script> <style> smart-date-time-picker { --smart-date-time-picker-calendar-button-width: 75px; --smart-date-time-picker-drop-down-width: 250px; --smart-date-time-picker-drop-down-height: 300px; } </style> </head> <body> <smart-date-time-picker calendar-button></smart-date-time-picker> </body> </html>

Demo