# Bootstrap Timepicker

Easily select a time for a text input using your mouse or keyboards arrow keys.

View Github Project

# Installation

This project is registered as a Bower package, and can be insalled with the following command:

        $ bower install bootstrap-timepicker

You can also download our latest release (and any previous release) here.

# Demos

Default timepicker. Value = (12:00 PM)

+ View Source

    <!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <link type="text/css" href="css/bootstrap.min.css" />        <link type="text/css" href="css/bootstrap-timepicker.min.css" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>    </head>    <body>        <div class="input-group bootstrap-timepicker timepicker">            <input id="timepicker1" type="text" class="form-control input-small">            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>        </div>         <script type="text/javascript">            $('#timepicker1').timepicker();        </script>    </body></html>

Inside a modal with 24hr mode and seconds enabled.

+ View Source

    <!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <link type="text/css" href="css/bootstrap.min.css" />        <link type="text/css" href="css/bootstrap-timepicker.min.css" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>    </head>    <body>        <div class="input-group bootstrap-timepicker timepicker">            <input id="timepicker2" type="text" class="form-control input-small">            <span class="input-group-addon">                <i class="glyphicon glyphicon-time"></i>            </span>        </div>         <script type="text/javascript">            $('#timepicker2').timepicker({                minuteStep: 1,                template: 'modal',                appendWidgetTo: 'body',                showSeconds: true,                showMeridian: false,                defaultTime: false            });        </script>    </body></html>

Without component markup, keyboard input disabled and floated right.

+ View Source

    <!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <link type="text/css" href="css/bootstrap.min.css" />        <link type="text/css" href="css/bootstrap-timepicker.min.css" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>    </head>    <body>        <div class="input-group bootstrap-timepicker timepicker pull-right">            <input id="timepicker3" type="text" class="form-control input-small">        </div>         <script type="text/javascript">            $('#timepicker3').timepicker({                minuteStep: 5,                showInputs: false,                disableFocus: true            });        </script>    </body></html>

Inside a modal with backdrop enabled, inputs disabled and with a preset value.

# A Timepicker Inside A Modal

Open Modal + View Source

    <!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <link type="text/css" href="css/bootstrap.min.css" />        <link type="text/css" href="css/bootstrap-timepicker.min.css" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>    </head>    <body>				<div> class="modal hide fade">					<div class="modal-header">						<h1>Timepicker inside a modal</h1>					</div>					<div class="modal-body">						<div class="input-group bootstrap-timepicker timepicker">								<input id="timepicker4" type="text" value="10:35 AM" class="form-control input-small">								<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>						</div>					</div>				</div>         <script type="text/javascript">            $('#timepicker4').timepicker({                minuteStep: 1,                secondStep: 5,                showInputs: false,                template: 'modal',                modalBackdrop: true,                showSeconds: true,                showMeridian: false            });        </script>    </body></html>

Without a template.

+ View Source

    <!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <link type="text/css" href="css/bootstrap.min.css" />        <link type="text/css" href="css/bootstrap-timepicker.min.css" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/bootstrap.min.js"></script>        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>    </head>    <body>        <div class="bootstrap-timepicker">            <input id="timepicker5" type="text" class="input-small">            <i class="icon-time"></i>        </div>         <script type="text/javascript">            $('#timepicker5').timepicker({                template: false,                showInputs: false,                minuteStep: 5            });        </script>    </body></html>

# Configuration

### template The picker widget template

Name | Options / Defaults | Description
--- | --- | ---
template | 'dropdown' (default) 'modal' false | Show picker in a dropdown Show picker in a modal Don't show a widget
maxHours | 24 | Specify a maximum number of hours the TimePicker can handle. showMeridian must be set to false
snapToStep | false | If true, setting the time will snap it to the closest "step", either minute or second, depending on which unit is currently highlighted. If the number would otherwise snap to 60 higher, the unit "overflows" to 0.
minuteStep | 15 | Specify a step for the minute field.
showSeconds | false | Show the seconds field.
secondStep | 15 | Specify a step for the second field.
defaultTime | 'current' (default) '11:45 AM' false | Set to the current time. Set to a specific time. Do not set a default time
showMeridian | true (default) false | 12hr mode 24hr mode
showInputs | true (default) false | Shows the text inputs in the widget. Hide the text inputs in the widget
disableFocus | false | Disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.
disableMousewheel | false | Disables the input from changing on mousewheel events
modalBackdrop | false | Show modal backdrop.
appendWidgetTo | body | Allow for custom placing of the widget
explicitMode | false | When true, user can type "123" to set time to "1:23" or "12345" to set time to "1:23:45".
icons |
    {
        up: 'glyphicon glyphicon-chevron-up',
        down: 'glyphicon glyphicon-chevron-down'
    }
| An object with keys 'up' and 'down' representing CSS class names to be used for the widget's icon classes.

### Data Attributes

The timepicker can be instantiated lazily without using javascript using `data-provide="timepicker"`.

      <div class="input-group bootstrap-timepicker timepicker"><input id="timepicker" class="form-control" data-provide="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/></div>

Configuration options can also be set with the use of data attributes.

      <div class="input-group bootstrap-timepicker timepicker"><input id="timepicker" class="form-control" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/></div>

# Methods

### showWidget Show the picker widget

      var time = $('#timepicker').timepicker('showWidget');

### setTime Set the time manually

      $('#timepicker').timepicker('setTime', '12:45 AM');

# Events

### Show Triggered when dropdown/modal widget is shown

      $('#timepicker').timepicker().on('show.timepicker', function(e) {    console.log('The time is ' + e.time.value);    console.log('The hour is ' + e.time.hours);    console.log('The minute is ' + e.time.minutes);    console.log('The meridian is ' + e.time.meridian);  });

### Hide Triggered when widget is hidden

      $('#timepicker').timepicker().on('hide.timepicker', function(e) {    console.log('The time is ' + e.time.value);    console.log('The hour is ' + e.time.hours);    console.log('The minute is ' + e.time.minutes);    console.log('The meridian is ' + e.time.meridian);  });

### Update Triggered when the date is updated

      $('#timepicker').timepicker().on('changeTime.timepicker', function(e) {    console.log('The time is ' + e.time.value);    console.log('The hour is ' + e.time.hours);    console.log('The minute is ' + e.time.minutes);    console.log('The meridian is ' + e.time.meridian);  });