Bootstrap Timepicker

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

View Github Project

Click here to support bootstrap-timepicker and make a donation with pledgie!

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.

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);
  });

Bootstrap Timepicker

Installation

Demos

A Timepicker Inside A Modal

Configuration

template The picker widget template

Data Attributes

Methods

showWidget Show the picker widget

setTime Set the time manually

Events

Show Triggered when dropdown/modal widget is shown

Hide Triggered when widget is hidden

Update Triggered when the date is updated