causeway-standard-theme

--- layout: default title: Timepicker for Twitter Bootstrap ---  <section id="timepicker"> <div class="center hero-unit" style="margin: 0; padding: 0;"> <br> <br> <br> <h1>Bootstrap Timepicker</h1> <br> <p class="lead">Easily select a time for a text input using your mouse or keyboards arrow keys.</p> <p><a href="http://travis-ci.org/jdewit/bootstrap-timepicker"><img style="max-width:100%; height: 15px;" alt="Build Status" src="https://secure.travis-ci.org/jdewit/bootstrap-timepicker.png" target="_blank"></a></p> <hr> <div class="row"> <div class="span4 center"> <a href="https://github.com/jdewit/bootstrap-timepicker" target="_blank" class="btn btn-large btn-primary"><i class="icon-share-alt icon-white"></i> View Github Project</a> </div> <div class="span4 center"> <a href="http://www.pledgie.com/campaigns/19125"><img alt="Click here to support bootstrap-timepicker and make a donation with pledgie!" src="http://www.pledgie.com/campaigns/19125.png?skin_name=chrome" border="0" target="_blank"/></a> </div> <div class="span4 center"> <a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://jdewit.github.com/bootstrap-timepicker"></a> <noscript><a href="http://flattr.com/thing/1116513/Bootstrap-Timepicker" target="_blank"> <img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript> </div> </div> </div> <br> <br> <h1>Installation</h1> <hr> <div> <p>This project is registered as a <a href="http://twitter.github.com/bower/">Bower</a> package.</p> <pre class="prettyprint linenums"> $ bower install bootstrap-timepicker </pre> </div> <hr> <h1>Demos</h1> <hr> <p>Default timepicker. Value = (<span id="timeDisplay"></span>)</p> <div class="input-append bootstrap-timepicker"> <input id="timepicker1" class="input-small" type="text"/><span class="add-on"><i class="icon-time"></i></span> </div>   <a href="#timepicker1Source" data-toggle="collapse">+ View Source</a> <div id="timepicker1Source" class="collapse"> <pre class="prettyprint linenums"> <!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">&lt/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>&lt/span> </div> <script type="text/javascript"> $('#timepicker1').timepicker(); </script> </body> </html> </pre> </div> <hr class="soften"> <p>Inside a modal with 24hr mode and seconds enabled.</p> <div class="input-append bootstrap-timepicker"> <input id="timepicker2" class="input-small" type="text"/><span class="add-on"><i class="icon-time"></i></span> </div>   <a href="#timepicker2Source" data-toggle="collapse">+ View Source</a> <div id="timepicker2Source" class="collapse"> <pre class="prettyprint linenums"> <!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">&lt/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> &lt/span> </div> <script type="text/javascript"> $('#timepicker2').timepicker({ minuteStep: 1, template: 'modal', appendWidgetTo: 'body', showSeconds: true, showMeridian: false, defaultTime: false }); </script> </body> </html> </pre> </div> <hr class="soften"> <p>Without component markup, keyboard input disabled and floated right.</p> <div class="bootstrap-timepicker pull-right" style="height: 2em;"> <a href="#timepicker3Source" data-toggle="collapse">+ View Source </a>   <input id="timepicker3" class="input-small" type="text" /> </div> <br> <br> <div id="timepicker3Source" class="collapse"> <pre class="prettyprint linenums"> <!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">&lt/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> </pre> </div> <hr class="soften"> <p>Inside a modal with backdrop enabled, inputs disabled and with a preset value.</p> <div id="timepicker4Modal" class="modal hide fade"> <div class="modal-header"> <h1>A Timepicker Inside A Modal</h1> </div> <div class="modal-body" style="min-height: 150px;"> <span class="bootstrap-timepicker" style="vertical-align: middle;"> <input id="timepicker4" class="input-small" value="10:35 AM" type="text" /> <i class="icon-time" style="margin: -2px 0 0 -22.5px; pointer-events: none; position: relative;"></i> </span> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary" data-dismiss="modal">OK</a> </div> </div>     <a class="btn btn-primary" href="#timepicker4Modal" data-toggle="modal">Open Modal</a> <a href="#timepicker4Source" data-toggle="collapse"> + View Source</a> <div id="timepicker4Source" class="collapse"> <pre class="prettyprint linenums"> <!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">&lt/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> </pre> </div> <hr class="soften"> <p>Without a template.</p> <span class="bootstrap-timepicker"> <input id="timepicker5" class="input-small" type="text" /> <i class="icon-time" style="margin: -2px 0 0 -22.5px; pointer-events: none; position: relative;"></i> </span>   <a href="#timepicker5Source" data-toggle="collapse"> + View Source</a> <div id="timepicker5Source" class="collapse"> <pre class="prettyprint linenums"> <!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">&lt/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> </pre> </div> <hr> <h1>Configuration</h1> <hr> <h3>template <small>The picker widget template</small></h3> <div class="well"> <table class="options-table table table-bordered table-striped table-rounded"> <thead> <tr> <th style="width: 25%;">Name</th> <th style="width: 25%;">Options / Defaults</th> <th style="widget: 50%;">Description</th> </tr> </thead> <tbody> <tr> <td>template</td> <td> 'dropdown' (default)<hr /> 'modal' <hr /> false </td> <td> Show picker in a dropdown <hr /> Show picker in a modal <hr /> Don't show a widget </td> </tr> <tr> <td>minuteStep</td> <td>15</td> <td>Specify a step for the minute field.</td> </tr> <tr> <td>showSeconds</td> <td>false</td> <td>Show the seconds field.</td> </tr> <tr> <td>secondStep</td> <td>15</td> <td>Specify a step for the second field.</td> </tr> <tr> <td>defaultTime</td> <td> 'current' (default) <hr /> '11:45 AM' <hr /> false </td> <td> Set to the current time. <hr /> Set to a specific time. <hr /> Do not set a default time </td> </tr> <tr> <td>showMeridian</td> <td> true (default) <hr /> false </td> <td> 12hr mode<hr /> 24hr mode </td> </tr> <tr> <td>showInputs</td> <td> true (default) <hr /> false </td> <td> Shows the text inputs in the widget. <hr /> Hide the text inputs in the widget </td> </tr> <tr> <td>disableFocus</td> <td>false</td> <td>Disables the input from focusing. This is useful for touch screen devices that display a keyboard on input focus.</td> </tr> <tr> <td>disableMousewheel</td> <td>false</td> <td>Disables the input from changing on mousewheel events</td> </tr> <tr> <td>modalBackdrop</td> <td>false</td> <td>Show modal backdrop.</td> </tr> </tbody> </table> </div> <div> <h3>Data Attributes</h3> <p>Configuration options can also be set with the use of data attributes. </p> <pre class="prettyprint linenums"> <div class="bootstrap-timepicker"/><input id="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/></div> </pre> </div> <hr> <h1>Methods</h1> <hr> <h3>showWidget <small>Show the picker widget</small></h3> <pre class="prettyprint linenums"> var time = $('#timepicker').timepicker('showWidget'); </pre> <h3>setTime <small>Set the time manually</small></h3> <pre class="prettyprint linenums"> $('#timepicker').timepicker('setTime', '12:45 AM'); </pre> <hr> <h1>Events</h1> <hr> <div> <h3> Show <small>Triggered when dropdown/modal widget is shown</small></h3> <pre class="prettyprint linenums"> $('#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); }); </pre> <h3>Hide <small>Triggered when widget is hidden</small></h3> <pre class="prettyprint linenums"> $('#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); }); </pre> <h3>Update <small>Triggered when the date is updated</small></h3> <pre class="prettyprint linenums"> $('#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); }); </pre> <hr> </div> </section>