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.




<div class="input-append bootstrap-timepicker-component">
    <input type="text" class="timepicker-default input-small">
    <span class="add-on">
        <i class="icon-time"></i>
Name Type Default/Options Description
template string 'dropdown' (default)
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)
Set to the current time.
Set to inputs current value
Do not set a default time
showMeridian boolean true (default)
12hr mode
24hr mode
showInputs boolean true (default)
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.