<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Timepicker for jQuery – Demos and Documentation</title>
<meta name="description" content="A lightweight, customizable jQuery timepicker plugin inspired by Google Calendar. Add a user-friendly javascript timepicker dropdown to your app in minutes." />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />
<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
<script type="text/javascript" src="lib/site.js"></script>
<link rel="stylesheet" type="text/css" href="lib/site.css" />
</head>
<body>
<header>
<h1><a href="https://github.com/jonthornton/jquery-timepicker">jquery.timepicker</a></h1>
<p class="body-text">
A lightweight, customizable javascript timepicker plugin for jQuery inspired by Google Calendar.
</p>
<ul id="header-links">
<li><a href="https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery">Documentation</a></li>
<li><a href="https://github.com/jonthornton/jquery-timepicker">Source code on GitHub</a></li>
<li><a href="https://github.com/jonthornton/jquery-timepicker/zipball/master">Download (zip)</a></li>
<li><a href="https://github.com/jonthornton/jquery-timepicker/issues?state=open">Help</a></li>
</ul>
</header>
<section>
<p class="body-text">Use this plugin to unobtrusively add a timepicker dropdown to your forms. It's lightweight (2.7kb minified and gzipped) and easy to customize.</p>
</section>
<section id="examples">
<article>
<div class="demo">
<h2>Basic Example</h2>
<p><input id="basicExample" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#basicExample').timepicker();
});
</script>
<pre class="code" data-language="javascript">$('#basicExample').timepicker();</pre>
</article>
<article>
<div class="demo">
<h2>Scroll Default Example</h2>
<p>Set the scroll position to local time if no value selected.</p>
<p><input id="scrollDefaultExample" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
});
</script>
<pre class="code" data-language="javascript">$('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });</pre>
</article>
<article>
<div class="demo">
<h2>Set Time Example</h2>
<p>Dynamically set the time using a Javascript Date object.</p>
<p>
<input id="setTimeExample" type="text" class="time" />
<button id="setTimeButton">Set current time</button>
</p>
</div>
<script>
$(function() {
$('#setTimeExample').timepicker();
$('#setTimeButton').on('click', function (){
$('#setTimeExample').timepicker('setTime', new Date());
});
});
</script>
<pre class="code" data-language="javascript">$('#setTimeExample').timepicker();
$('#setTimeButton').on('click', function (){
$('#setTimeExample').timepicker('setTime', new Date());
});</pre>
</article>
<article>
<div class="demo">
<h2>Duration Example</h2>
<p>Set a starting time and see duration from that starting time. You can optionally set an maxTime as well.</p>
<p><input id="durationExample" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#durationExample').timepicker({
'minTime': '2:00pm',
'maxTime': '11:30pm',
'showDuration': true
});
});
</script>
<pre class="code" data-language="javascript">$('#durationExample').timepicker({
'minTime': '2:00pm',
'maxTime': '11:30pm',
'showDuration': true
});</pre>
</article>
<article>
<div class="demo">
<h2>Event Example</h2>
<p>Trigger an event after selecting a value. Fires before the input onchange event.</p>
<p>
<input id="onselectExample" type="text" class="time" />
<span id="onselectTarget" style="margin-left: 30px;"></span>
</p>
</div>
<script>
$(function() {
$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
$('#onselectTarget').text($(this).val());
});
});
</script>
<pre class="code" data-language="javascript">$('#onselectExample').timepicker();
$('#onselectExample').on('changeTime', function() {
$('#onselectTarget').text($(this).val());
});</pre>
</article>
<article>
<div class="demo">
<h2>DisableTimeRanges Example</h2>
<p>Prevent selection of certain time values.</p>
<p><input id="disableTimeRangesExample" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#disableTimeRangesExample').timepicker({ 'disableTimeRanges': [['1am', '2am'], ['3am', '4:01am']] });
});
</script>
<pre class="code" data-language="javascript">$('#disableTimeRangesExample').timepicker({
'disableTimeRanges': [
['1am', '2am'],
['3am', '4:01am']
]
});</pre>
</article>
<article>
<div class="demo">
<h2>noneOption Example</h2>
<p>Custom options can be added to the dropdown menu.</p>
<p><input id="noneOptionExample" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#noneOptionExample').timepicker({
'noneOption': [
{
'label': 'Foobar',
'className': 'shibby',
'value': '42'
},
'Foobar2'
]
});
});
</script>
<pre class="code" data-language="javascript">
$('#noneOptionExample').timepicker({
'noneOption': [
{
'label': 'Foobar',
'className': 'shibby',
'value': '42'
},
'Foobar2'
]
});
</pre>
</article>
<article>
<div class="demo">
<h2>timeFormat Example</h2>
<p>timepicker.jquery uses the time portion of <a href="http://php.net/manual/en/function.date.php">PHP's date formatting commands</a>.</p>
<p><input id="timeformatExample1" type="text" class="time" /> <input id="timeformatExample2" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });
});
</script>
<pre class="code" data-language="javascript">$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });</pre>
</article>
<article>
<div class="demo">
<h2>Step Example</h2>
<p>Generate drop-down options with varying levels of precision.</p>
<p><input id="stepExample1" type="text" class="time" /> <input id="stepExample2" type="text" class="time" /></p>
</div>
<script>
$(function() {
$('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({
'step': function(i) {
return (i%2) ? 15 : 45;
}
});
});
</script>
<pre class="code" data-language="javascript">$('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({
'step': function(i) {
return (i%2) ? 15 : 45;
}
});</pre>
</article>
<article>
<div class="demo">
<h2>forceRoundTime Example</h2>
<p>jquery-timepicker allows entering times via the keyboard. Setting forceRoundTime to true will
round the entered time to the nearest option on the dropdown list.</p>
<p><input id="roundTimeExample" type="text" class="time" /> </p>
</div>
<script>
$(function() {
$('#roundTimeExample').timepicker({ 'forceRoundTime': true });
});
</script>
<pre class="code" data-language="javascript">$('#roundTimeExample').timepicker({ 'forceRoundTime': true });</pre>
</article>
<article>
<div class="demo">
<h2>Select Example</h2>
<p>jquery-timepicker can render itself as a select element too.</p>
<p><input id="selectExample" class="time" /> <button id="selectButton">Toggle</button></p>
</div>
<script>
$(function() {
$('#selectExample').timepicker();
$('#selectButton').click(function(e) {
$('#selectExample').timepicker('option', { useSelect: true });
$(this).hide();
});
});
</script>
<pre class="code" data-language="javascript">$('#selectExample').timepicker();
$('#selectButton').click(function(e) {
$('#selectExample').timepicker('option', { useSelect: true });
$(this).hide();
});</pre>
</article>
<article>
<div class="demo">
<h2>Non-input Example</h2>
<p>jquery-timepicker can be bound to any visibile DOM element, such as spans or divs.</p>
<p><span id="spanExample" style="background:#f00; padding:0 10px; margin-right:100px;"></span> <button id="openSpanExample">Pick Time</button> </p>
</div>
<script>
$(function() {
$('#spanExample').timepicker();
$('#openSpanExample').on('click', function(){
$('#spanExample').timepicker('show');
});
});
</script>
<pre class="code" data-language="javascript">$('#spanExample').timepicker();
$('#openSpanExample').on('click', function(){
$('#spanExample').timepicker('show');
});</pre>
</article>
<article>
<div class="demo">
<h2>Datepair Plugin Example</h2>
<p>jquery-timepicker is designed to work with the <a href="http://jonthornton.github.com/Datepair.js">jquery-datepair plugin</a>.
<p id="datepairExample">
<input type="text" class="date start" />
<input type="text" class="time start" /> to
<input type="text" class="time end" />
<input type="text" class="date end" />
</p>
</div>
<script src="http://jonthornton.github.io/Datepair.js/dist/datepair.js"></script>
<script src="http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js"></script>
<script>
$('#datepairExample .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
$('#datepairExample .date').datepicker({
'format': 'm/d/yyyy',
'autoclose': true
});
$('#datepairExample').datepair();
</script>
<pre class="code" data-language="javascript">
<p id="datepairExample">
<input type="text" class="date start" />
<input type="text" class="time start" /> to
<input type="text" class="time end" />
<input type="text" class="date end" />
</p>
<script type="text/javascript" src="datepair.js"></script>
<script type="text/javascript" src="jquery.datepair.js"></script>
<script>
// initialize input widgets first
$('#datepairExample .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});
$('#datepairExample .date').datepicker({
'format': 'yyyy-m-d',
'autoclose': true
});
// initialize datepair
$('#datepairExample').datepair();
</script></pre>
</article>
</section>
<section>
<h2>Need Help?</h2>
<p>Check <a href="https://github.com/jonthornton/jquery-timepicker#timepicker-plugin-for-jquery">the documentation</a> or <a href="https://github.com/jonthornton/jquery-timepicker/issues?state=open">submit an issue</a> on GitHub.</p>
</section>
<footer>
<p>© 2014 <a href="http://jonthornton.com">Jon Thornton</a></p>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-15605525-4', 'auto');
ga('send', 'pageview');
</script>
</div></body>
</html>