About time picker

This jQuery plugin allows you to add a time picker to make it easier to select times to your Bootstrap form. This time picker can be fully customized to match the look and feel you want using HTML and CSS.

Examples

Simplest example to display a time picker.

<div class="bfh-timepicker">
</div>

Example showing how to set a default time.

<div class="bfh-timepicker" data-time="08:00">
</div>

Example showing how to set time to now.

<div class="bfh-timepicker" data-time="now">
</div>

Example showing how to switch to 12h mode.

<div class="bfh-timepicker" data-mode="12h">
</div>

Available languages

Not applicable.

Options

Option Description
icon String. Class name for the icon on the input. Default: 'glyphicon glyphicon-time'
align String. Alignment for the icon 'left' or 'right'. Default: 'left'
input String. Class name for styling the input. Default: 'form-control'
placeholder String. Text for the placeholder of the input. Default: ''
name String. Name of the input. Default: ''
time String. Initial time. Default: 'now'
mode String. To switch between '24h' and '12h' mode. Default: '24h'

Methods

Method Description
$().bfhtimepicker('toggle') Toggles the time picker.

Events

Event Description
change.bfhtimepicker This event fires immediately when a time is selected.
show.bfhtimepicker This event fires immediately when the show instance method is called.
shown.bfhtimepicker This event is fired when the select has been made visible to the user (will wait for CSS transitions, to complete).
hide.bfhtimepicker This event is fired immediately when the hide instance method has been called.
hidden.bfhtimepicker This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).