Overview

smartTimePicker represents an element used for selection of time (hours and minutes).

To initialize a 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.draw.js - this file contains SVG rendering functionality used in element
  • smart.numeric.js - this file contains functions used for the processing of numeric objects.
  • smart.math.js - this file contains mathematical functions used by the smartTimePicker element.
  • smart.timepicker.js - the JS file containing the element definition

Here's how to initialize a Smart.TimePicker:

<!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.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.timepicker.js"></script>
</head>
<body>
 <smart-time-picker></smart-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.


Smart.TimePicker accepts javascript Date objects as time values. The value property is responsible for the time value of the element. Like every custom element property it can be set as an attribute inside the HTML tag of the element:

<smart-time-picker value="new Date(2017,12,1,12,25)"></smart-time-picker>

Demo

or 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.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.timepicker.js"></script>
 <script>
     window.onload = function () {
        document.querySelector('smart-time-picker').value = new Date(2017, 12, 1, 15, 24, 0);
     }
 </script>
</head>
<body>
 <smart-time-picker></smart-time-picker>
</body>
</html>

Demo

Appearance

Smart.TimePicker supoprts 12 and 24 hour time format. By default the element uses 12 hour format but the user can change that via the format property like so:

<smart-time-picker format="24-hour"></smart-time-picker>

Demo


The time picker has two orientation modes that can be changed using the view property. The possible values are:

  • landscape - horizontally positioned
  • portrait - vertically positioned. Default value.

The property can be set as HTML attribute:

<smart-time-picker view="landscape"></smart-time-picker>

Demo

or 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.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.timepicker.js"></script>
 <script>
     window.onload = function () {
        document.querySelector('smart-time-picker').view = 'landscape';
     }
 </script>
</head>
<body>
 <smart-time-picker></smart-time-picker>
</body>
</html>

Demo


The element has a footer section that is hidden by default. The visibility of the section is controlled by the footer property. The contneto of the footer can be customized using an HTML Template. Here's how to enable the footer and place HTML content inside:

<!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.button.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.timepicker.js"></script>
</head>
<body>
 <template id="footerTemplate">
     <smart-button>Close</smart-button>
     <smart-button>Ok</smart-button>
 </template>
 <smart-time-picker footer footer-template="footerTemplate"></smart-time-picker>
</body>
</html>

Demo

The same can be accomplished via 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.button.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.timepicker.js"></script>
 <script>
     window.onload = function () {
         var timePicker = document.querySelector('smart-time-picker');
 
         timePicker.footerTemplate = 'footerTemplate';
         timePicker.footer = true;
     }
 </script>
</head>
<body>
 <template id="footerTemplate">
     <smart-button>Close</smart-button>
     <smart-button>Ok</smart-button>
 </template>
 <smart-time-picker></smart-time-picker>
</body>
</html>

Demo

Behavior

Time selection is devided into hour selection and minute selection and the user can switch between the views by clicking on the appropriate part of the time string. However the user can enable the autoSwitchToMinutes property which redirects the user to the minute selection view after selecting an hour.

<smart-time-picker auto-switch-to-minutes></smart-time-picker>

Demo

The selection view can also be controlled via the selection property. The available options are:

  • hour - hour selection.
  • minute - minute selection.

The view can be changed at any time using javascript or applied on HTML initialization:

<smart-time-picker selection="minute"></smart-time-picker>

Demo


The user can also change the minute interval. This can be accomplished by applying the new minute interval in numeric format to the minuteInterval property.

<smart-time-picker selection="minute" minute-interval="15"></smart-time-picker>

Demo

Styling

Styling Smart.TimePicker is done exclusively trough CSS class selectors.

<!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.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.timepicker.js"></script>
 <style>
     smart-time-picker {
         width: 150px;
         height: 300px;
     }
     smart-time-picker .smart-main-container {
        background-color: #EEEEEE;
     }
 </style>
</head>
<body>
 <smart-time-picker></smart-time-picker>
</body>
</html>

Demo