Forms

Time Picker

A simple component that turns a form input into a time picker with the help of Select 2.

Requirements

// Css
<link rel="stylesheet" href="css/vendor/select2.min.css" />
<link rel="stylesheet" href="css/vendor/select2-bootstrap4.min.css" />

// Javascript
<script src="js/vendor/select2.full.min.js"></script>
<script src="js/vendor/timepicker.js"></script>

Example

Javascript
var timePicker = new TimePicker(document.querySelector('#timePicker24'));
Html
<div class="time-picker-container">
  <label class="form-label">Time</label>
  <input class="form-control time-picker" id="timePicker24" />
</div>

More Examples

You may find more examples in Interface.Forms.Controls.TimePicker.html file which is initialized by js/forms/controls.timepicker.js.

Reference

NAME
TYPE
DEFAULT
DESCRIPTION
NAME
element
TYPE
DOM Element
DEFAULT
null
DESCRIPTION
An input to render selected time into.
NAME
options.hours24
TYPE
string
DEFAULT
'0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23'
DESCRIPTION
Comma separated hours for 24 hour time format.
NAME
options.hours12
TYPE
string
DEFAULT
'1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12'
DESCRIPTION
Comma separated hours for 12 hour time format.
NAME
options.minutes
TYPE
string
DEFAULT
'0, 15, 30, 45'
DESCRIPTION
Comma separated minutes for both formats.
NAME
options.format
TYPE
string
DEFAULT
'24'
DESCRIPTION
Time format, 24 or 12.
NAME
options.delimiter
TYPE
string
DEFAULT
':'
DESCRIPTION
Separator for hour and minute. It's also used to split initial value of the input.
NAME
options.addZeros
TYPE
string
DEFAULT
'true'
DESCRIPTION
If 'true' adds a zero at the start of the numbers that smaller than 10.
NAME
options.output
TYPE
string
DEFAULT
'string'
DESCRIPTION
Can be set as 'string' or 'date'. Example date output: Fri Aug 07 2020 01:30:00 GMT+0300 (GMT+03:00) Example string output: 01:30 or 01:30:AM.
NAME
options.classname
TYPE
string
DEFAULT
''
DESCRIPTION
Class to add Select2 elements.
NAME
options.dropdownClassname
TYPE
string
DEFAULT
''
DESCRIPTION
Class to add Select2 dropdown elements.