TimePicker - Documentation | www.HtmlElements.com

Overview

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

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.timepicker.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • 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

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #timepicker is a smart-time-picker tag.

      import {smartToast} from "../../source/modules/smart.timepicker.js";
      
      Smart('#timepicker', class {
      get properties() {
      	return {
      		value: new Date()
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const timepicker = document.querySelector("#timepicker"); and set the properties like that:
      const timepicker = document.querySelector("#timepicker");
      
      timepicker.value = new Date();
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #timepicker is a DIV tag.

      import {smartToast} from "../../source/modules/smart.timepicker.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const timepicker = new smartToast('#timepicker', {
         	value: new Date()
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

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

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

      Demo

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const timepicker = document.createElement('smart-time-picker');

Append it to the DOM:
document.body.appendChild(timepicker);

Remove it from the DOM:
timepicker.parentNode.removeChild(timepicker);

Set a property:
timepicker.propertyName = propertyValue;

Get a property value:
const propertyValue = timepicker.propertyName;

Invoke a method:
timepicker.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

toast.addEventListener(eventName, eventHandler);

Remove Event Listener:
toast.removeEventListener(eventName, eventHandler, true);

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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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.default.css" type="text/css" />
 <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