Timepicker

Create a timepicker which can easily be used by selecting a time value from a pre filled dropdown.


Usage

To apply the timepicker, just add the data-timepicker attribute to an <input> element. The timepicker will automatically display a pre filled dropdown on focus, which can be navigated by pressing the up or down button on the keyboard or by scrolling with the mouse.

Dependencies

Component Files Description
Core js/core/core.js The core file is necessary to perform basic utility methods and register the component in the global namespace.
Dropdown css/core/dropdown.css js/core/dropdown.js Creates the dropdown used by the user the select the time.
Autocomplete js/components/autocomplete.js Allows for basic template rendering for improved performance and scalability.

Default Implementation

Markup

<input type="text" data-timepicker>

Display meridian time

To display meridian time, just define the format option and set it to 12h

Example

Markup

<input type="text" data-timepicker="{format:'12h'}">

JavaScript options

Option Possible value Default Description
format '24h' or '12h' '24h' Defines the preferred time notation

Component Init:

  • 
    <input type="text" data-timepicker>
    
    <!-- Display 12 hour format -->
    <input type="text" data-timepicker="{format:'12h'}">
  • $(element).clique('timepicker', {
        format : '12h'
    }
  • var timepicker = Clique.timepicker(element, {
        format : '12h'
    });