Bootstrap Timepicker
Easily select a time for a text input using your mouse or keyboards arrow keys.
Installation
This project is registered as a Bower package.
$ bower install bootstrap-timepicker
Demos
Default timepicker.
<!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.
<!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',
showSeconds: true,
showMeridian: false
});
</script>
</body>
</html>
Without component markup, keyboard input disabled and floated right.
<!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. |
| 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);
});