<!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" name="foo" /> <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>