--- layout: default title: Timepicker for Twitter Bootstrap ---

# 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.

        $ bower install bootstrap-timepicker

# Demos

Default timepicker. Value = ()

+ 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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
        </head>
        <body>
            <div class="input-append bootstrap-timepicker">
                <input id="timepicker1" type="text" class="input-small">
                <span class="add-on"><i class="icon-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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
        </head>
        <body>
            <div class="input-append bootstrap-timepicker">
                <input id="timepicker2" type="text" class="input-small">
                <span class="add-on">
                    <i class="icon-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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
        </head>
        <body>
            <div class="bootstrap-timepicker pull-right">
                <input id="timepicker3" type="text" class="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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.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="bootstrap-timepicker">
    								<input id="timepicker4" type="text" value="10:35 AM" class="input-small">
    								<i class="icon-time"></i>
    						</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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script type="text/javascript" src="js/bootstrap-2.2.2.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
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.

### Data Attributes

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

      <div class="bootstrap-timepicker"/><input id="timepicker" 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.hour);
        console.log('The minute is ' + e.time.minute);
        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.hour);
        console.log('The minute is ' + e.time.minute);
        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.hour);
        console.log('The minute is ' + e.time.minute);
        console.log('The meridian is ' + e.time.meridian);
      });