Build your web apps using Smart Custom Elements
Smart.DateTimePicker - configuration and usage
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
Here's how to initialize a simple dateTimePicker element:
Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.
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>
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>
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>
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.
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.
Smart.DateTimePicker implements the following keys:
|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 ).|