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.default.css - the CSS file containing the styles for element
  • smart.core.js - the JS file containing the definition for the non-commercial elements.
  • smart.elements.js - the JS file containing the definition for the elements.

You can use either smart.core.js or smart.elements.js

Here's how to initialize a simple dateTimePicker element:

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.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.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.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:

KeyAction
Arrow Up / Arrow DownIncreases/Decreases the selected date/time by one or moves the caret to the begining or the end ( depends on the editMode ).
Arrow Left / Arrow RightNavigate to the previous/next selection or moves the caret forward ( depends on the editMode ).
HomeSelects the first item from the date/time input or sets the caret to the beggining ( depends on the editMode ).
EndSelects the last item from the date/time input or sets the caret to the end ( depends on the editMode ).