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


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.


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


<input type="text" data-timepicker>

Display meridian time

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



<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'