Timepicker bootstrap-timepicker.js

About timepicker

A very cool widget to easily select a time for a text input using your mouse or arrow keys.

Download file

Default timepicker.

Inside a modal with 24hr mode and seconds enabled.

Without component markup and inputs disabled.

Inside a modal with backdrop and inputs disabled.

Without a template.

Javascript:

$('.timepicker-default').timepicker();

HTML:

<div class="input-append bootstrap-timepicker-component">
    <input type="text" class="timepicker-default input-small">
    <span class="add-on">
        <i class="icon-time"></i>
    </span>
</div>

Name	Type	Default/Options	Description
template	string	'dropdown' (default) 'modal' false	Show picker in a dropdown Show picker in a modal Don't show a widget
minuteStep	integer	15	Specify a step for the minute field.
showSeconds	boolean	false	Show the seconds field.
secondStep	integer	15	Specify a step for the second field.
defaultTime	string	'current' (default) 'value' false	Set to the current time. Set to inputs current value Do not set a default time
showMeridian	boolean	true (default) false	12hr mode 24hr mode
showInputs	boolean	true (default) false	Shows the text inputs in the widget. Hide the text inputs in the widget
disableFocus	boolean	false	Disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.
modalBackdrop	boolean	false	Show modal backdrop.