diff options
Diffstat (limited to 'js/vendor/jquery-timepicker/index.html')
| -rw-r--r-- | js/vendor/jquery-timepicker/index.html | 1177 |
1 files changed, 1177 insertions, 0 deletions
diff --git a/js/vendor/jquery-timepicker/index.html b/js/vendor/jquery-timepicker/index.html new file mode 100644 index 00000000..269c9995 --- /dev/null +++ b/js/vendor/jquery-timepicker/index.html @@ -0,0 +1,1177 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > + <title>jQuery UI Time Picker by Francois Gelinas</title> + <link rel="stylesheet" href="include/ui-1.10.0/ui-lightness/jquery-ui-1.10.0.custom.min.css" type="text/css" /> + <link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.3" type="text/css" /> + + <script type="text/javascript" src="include/jquery-1.9.0.min.js"></script> + <script type="text/javascript" src="include/ui-1.10.0/jquery.ui.core.min.js"></script> + <script type="text/javascript" src="include/ui-1.10.0/jquery.ui.widget.min.js"></script> + <script type="text/javascript" src="include/ui-1.10.0/jquery.ui.tabs.min.js"></script> + <script type="text/javascript" src="include/ui-1.10.0/jquery.ui.position.min.js"></script> + + <script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.3"></script> + + <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> + <style type="text/css"> + /* some styling for the page */ + body { font-size: 10px; /* for the widget natural size */ } + #content { font-size: 1.2em; /* for the rest of the page to show at a normal size */ + font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; + width: 950px; margin: auto; + } + .code { margin: 6px; padding: 9px; background-color: #fdf5ce; border: 1px solid #c77405; } + fieldset { padding: 0.5em 2em } + hr { margin: 0.5em 0; clear: both } + a { cursor: pointer; } + #requirements li { line-height: 1.6em; } + </style> + + <script type="text/javascript"> + + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-24327002-1']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + + function plusone_clicked() { + $('#thankyou').fadeIn(300); + } + + $(document).ready(function() { + $('#floating_timepicker').timepicker({ + onSelect: function(time, inst) { + $('#floating_selected_time').html('You selected ' + time); + } + }); + + $('#tabs').tabs(); + + }); + + + </script> +</head> +<body> + +<div id="content"> + + +<div style="float: right; padding: 0 0 20px 20px; font-size: 10px; text-align: right"> + + + <div style=" min-height: 50px"> + <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> + <input type="hidden" name="cmd" value="_s-xclick"> + <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- + "> + <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!"> + <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> + <br> + aka beer! + </form> + </div> + + <div id="floating_timepicker"> + </div> + <span id="floating_selected_time"> + </span> +</div> + +<h1>jQuery UI Timepicker + <span style="color: #999; font-size:10px;">(By <a href="http://fgelinas.com">François Gélinas</a>)</span> + <g:plusone callback='plusone_clicked'></g:plusone> + <span id="thankyou" style="display: none; font-size: 0.6em;" class="code"> + Thanks !! (: + </span> +</h1> + +<h2>What is this?</h2> +<p style="font-size: 1.1em;"> + + This is a jQuery UI time picker plugin built to match with other official jQuery UI widgets. + Based on the existing date picker, it will blend nicely with your form and use your selected jQuery UI theme. + The plugin is very easy to integrate in your form for time (hours / minutes) inputs. +</p> +<p> + Licensed under the same license as jQuery : <a href="http://docs.jquery.com/Licensing">MIT and GPL licenses</a> +</p> + +<div style="clear: both"></div> + +<div id="tabs"> + + <ul> + <li><a href="#examples">Examples</a></li> + <li><a href="#usage">Usage</a></li> + <li><a href="#requirements">Requirements</a></li> + <li><a href="#release_notes">Release notes</a></li> + <li><a href="#get_timepicker">Get Timepicker version 0.3.3</a></li> + </ul> + + <div id="examples"> + <div> + <label for="timepicker.[1]">Default time picker :</label> + <input type="text" style="width: 70px;" id="timepicker.[1]" value="" /> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker\\.\\[1\\]').timepicker( { + showAnim: 'blind' + } ); + }); + </script> + + <a onclick="$('#script_1').toggle(200); return false;">[Show code]</a> + <pre id="script_1" style="display: none" class="code">$('#timepicker').timepicker();</pre> + </div> + + + <hr /> + + <div> + <label for="timepicker_6">Time picker with period (AM/PM) in input and with hours leading 0s :</label> + <input type="text" style="width: 70px;" id="timepicker_6" value="01:30 PM" /> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_6').timepicker({ + showPeriod: true, + showLeadingZero: true + }); + }); + </script> + + <a onclick="$('#script_6').toggle(200)">[Show code]</a> +<pre id="script_6" style="display: none" class="code">$('#timepicker').timepicker({ + showPeriod: true, + showLeadingZero: true +});</pre> + </div> + + <hr /> + + <div> + <label for="timepicker_locale">Time picker with buttons and labels in another language (Français) :</label> + <input type="text" style="width: 70px;" id="timepicker_locale" value="13h30" /> + <br> + See the <a href="i18n/i18n.html">internationalisation page</a> for more information and details. + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_locale').timepicker({ + hourText: 'Heures', + minuteText: 'Minutes', + amPmText: ['AM', 'PM'], + timeSeparator: 'h', + showLeadingZero: false, + nowButtonText: 'Maintenant', + showNowButton: true, + closeButtonText: 'Fermer', + showCloseButton: true, + deselectButtonText: 'Désélectionner', + showDeselectButton: true + }); + }); + + </script> + <a onclick="$('#script_locale').toggle(200)">[Show code]</a> +<pre id="script_locale" style="display: none" class="code">$('#timepicker').timepicker({ + hourText: 'Heures', + minuteText: 'Minutes', + amPmText: ['AM', 'PM'], + timeSeparator: 'h', + nowButtonText: 'Maintenant', + showNowButton: true, + closeButtonText: 'Fermer', + showCloseButton: true, + deselectButtonText: 'Désélectionner', + showDeselectButton: true +});</pre> + </div> + + <hr /> + + <div> + <label for="timepicker_7">Time picker with restricted (disabled) hours / minutes. 8:30 PM to 6:30 AM disabled :</label> + <input type="text" style="width: 70px" id="timepicker_7" value="01:30 PM" /> + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_7').timepicker({ + showPeriod: true, + onHourShow: timepicker7OnHourShowCallback, + onMinuteShow: timepicker7OnMinuteShowCallback + }); + }); + function timepicker7OnHourShowCallback(hour) { + if ((hour > 20) || (hour < 6)) { + return false; + } + return true; + } + function timepicker7OnMinuteShowCallback(hour, minute) { + if ((hour == 20) && (minute >= 30)) { return false; } + if ((hour == 6) && (minute < 30)) { return false; } + return true; + } + + </script> + <a onclick="$('#script_7').toggle(200)">[Show code]</a> +<pre id="script_7" style="display: none" class="code">$('#timepicker').timepicker({ + showPeriod: true, + onHourShow: OnHourShowCallback, + onMinuteShow: OnMinuteShowCallback + }); +function OnHourShowCallback(hour) { + if ((hour > 20) || (hour < 6)) { + return false; // not valid + } + return true; // valid +} +function OnMinuteShowCallback(hour, minute) { + if ((hour == 20) && (minute >= 30)) { return false; } // not valid + if ((hour == 6) && (minute < 30)) { return false; } // not valid + return true; // valid +}</pre> + </div> + + <hr /> + + <div> + <label for="timepicker_showon">Define when the time picker is shown with the <kbd>showOn</kbd> option and set a trigger element with the <kbd>button</kbd> option</label> + <input type="text" style="width: 70px;" id="timepicker_showon" value="13h30" /> + <div class='timepicker_button_trigger' + style="width: 16px; height:16px; background: url(include/ui-1.10.0/ui-lightness/images/ui-icons_222222_256x240.png) -80px, -96px; + display: inline-block; border-radius: 2px; border: 1px solid #222222; margin-top: 3px; cursor:pointer"></div> + <button class='timepicker_button_trigger' id="btn_trigger_timepicker">Show</button> + + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_showon').timepicker({ + showOn: 'button', + button: $('.timepicker_button_trigger'), + showLeadingZero: false, + timeSeparator: 'h' + }); + + }); + + </script> + <a onclick="$('#script_showhide').toggle(200)">[Show code]</a> +<pre id="script_showhide" style="display: none" class="code">$('#timepicker').timepicker({ + showOn: 'button', + button: '.timepicker_button_trigger' +}); +</pre> + + </div> + + + <hr /> + + <div> + <label for="timepicker_noPeriodLabels">Time picker without the AM/PM labels on the left (showPeriodLabels option set to false:</label> + <input type="text" style="width: 70px;" id="timepicker_noPeriodLabels" value="13:30" /> + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_noPeriodLabels').timepicker({ + showPeriodLabels: false + }); + }); + + </script> + <a onclick="$('#script_noPeriodLabels').toggle(200)">[Show code]</a> +<pre id="script_noPeriodLabels" style="display: none" class="code">$('#timepicker').timepicker({ + showPeriodLabels: false, +}); +</pre> + + </div> + + + <hr /> + + <div> + + <label for="timepicker_customrange">Custom defined hours range (Business hours 6am to 7pm) and minutes increment set to 15 instead of 5, on 3 rows</label> + <input type="text" style="width: 70px" id="timepicker_customrange" value="13:30"> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_customrange').timepicker({ + hours: { starts: 6, ends: 19 }, + minutes: { interval: 15 }, + rows: 3, + showPeriodLabels: true, + minuteText: 'Min' + }) + }); + + </script> + + <a onclick="$('#script_2').toggle(200)">[Show code]</a> +<pre id="script_2" style="display: none" class="code"> $('#timepicke').timepicker({ + hours: { starts: 6, ends: 19 }, + minutes: { interval: 15 }, + rows: 3 + showPeriodLabels: true, + minuteText: 'Min' +}); +</pre> + </div> + + + <!-- Example / test for custom minute parameter --> + <hr /> + <div> + <label for="timepicker_customrange">Custom defined minute choice, 15 minute interval + 01 and 59</label> + <input type="text" style="width: 70px" id="timepicker_customminutes" value="13:30"> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_customminutes').timepicker({ + minutes: { + interval: 15, + manual: [ 0, 1, 30, 59 ] + }, + showPeriodLabels: true + }) + }); + + </script> + + <a onclick="$('#script_minutes').toggle(200)">[Show code]</a> +<pre id="script_minutes" style="display: none" class="code"> $('#timepicke').timepicker({ + minutes: { + interval: 15, + manual: [ 0, 1, 30, 59 ] + }, +}); +</pre> + </div> + + <hr /> + + <div> + <label for="timepicker_hours">Input for hours only :</label> + <input type="text" style="width: 70px" id="timepicker_hours" value="5 PM"> + , <label for="timepicker_minutes">input for minutes only :</label> + <input type="text" style="width: 70px" id="timepicker_minutes" value="45"> + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_hours').timepicker({ + showMinutes: false, + showPeriod: true, + showLeadingZero: false + }); + $('#timepicker_minutes').timepicker({ + showHours: false + }); + }) + </script> + + <a onclick="$('#script_hoursminutesonly').toggle(200)">[Show code]</a> +<pre id="script_hoursminutesonly" style="display: none" class="code">$('#timepicker_hours').timepicker({ + showMinutes: false, + showPeriod: true, + showLeadingZero: false +}); +$('#timepicker_minutes').timepicker({ + showHours: false +});</pre> + + <br> + + <label for="timepicker_hours_2">Another hour input example arbitrary number of hours, ex: select between 10 and 40 hours</label> + <input type="text" style="width: 70px" id="timepicker_hours_2" value="120"> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_hours_2').timepicker({ + hours: { + starts: 10, + ends: 40 + }, + rows: 8, + showPeriodLabels: false, + showPeriod: false, + showMinutes: false + }); + }) + </script> + <a onclick="$('#script_hours_2').toggle(200)">[Show code]</a> + <pre id="script_hours_2" style="display: none" class="code">$('#timepicker_hours_2').timepicker({ + hours: { + starts: 10, + ends: 40 + }, + rows: 8, + showPeriodLabels: false, + showPeriod: false, + showMinutes: false +});</pre> + + </div> + + + <hr /> + + <div> + <label for="timepicker_buttons">Timepicker with the Now, Deselect and Close buttons</label> + <input type="text" style="width: 70px" id="timepicker_buttons" value="12:35"> + + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_buttons').timepicker({ + showNowButton: true, + showDeselectButton: true, + defaultTime: '', // removes the highlighted time for when the input is empty. + showCloseButton: true + }); + }) + </script> + + <a onclick="$('#script_buttonpane').toggle(200)">[Show code]</a> +<pre id="script_buttonpane" style="display: none" class="code">$('#timepicker_buttons').timepicker({ + showNowButton: true, + showDeselectButton: true, + defaultTime: '', // removes the highlighted time for when the input is empty. + showCloseButton: true +});</pre> + + </div> + + + <hr /> + + <div> + <label for="timepicker_3">onSelect (hours and minutes both trigger event), beforeShow and onClose events :</label> + <input type="text" style="width: 70px" id="timepicker_3" value="13:30" /> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_3').timepicker({ + beforeShow: function(input, inst) { + log_event('beforeShow triggered for instance id ' + inst.id); + }, + onClose: function(time, inst) { + log_event('onClose triggered with time : ' + time + ' for instance id : ' + inst.id); + }, + onSelect: function(time, inst) { + log_event('onSelect triggered with time : ' + time + ' for instance id : ' + inst.id); + } + }); + }); + + function log_event(event) { + $('#events_log').val( + $('#events_log').val() + "\n" + event + ) + } + </script> + + <a onclick="$('#script_3').toggle(200)">[Show code]</a> +<pre id="script_3" style="display: none" class="code">function log_event(event) { + $('#events_log').val( + $('#events_log').val() + "\n" + event + ) +} +$('#timepicker').timepicker({ + onClose: function(time, inst) { + log_event('onClose triggered with time : ' + time + ' for instance id : ' + inst.id); + }, + onSelect: function(time, inst) { + log_event('onSelect triggered with time : ' + time + ' for instance id : ' + inst.id); + } +}); +</pre> + <br /> + <textarea id="events_log" rows="4" cols="120" >events log :</textarea> + </div> + + +<hr /> + + <div> + + <div style="float: left; width: 400px;"> + Inline time picker : + <span style="color: #888;"> + <label for="timepicker_alt">Alternate field :</label> + <input type="text" style="width: 70px" id="timepicker_alt" value="13:30" readonly="readonly" disabled="disabled"/> + </span> + <br /> + <input type="button" value="Change time to 16:55" onclick="$('#timepicker_inline_7').timepicker('setTime','16:55');"> + <br> + <input type="button" id='tp7_getTime_button' value="Get selected time" onclick="tp7_getTime();" > + <br> + <input type="button" id="tp7_getHourMinute_button" value="Get hour and minute" onclick="tp7_getHourMinute();" > + <br /> + <a onclick="$('#script_inline').toggle(200); return false;">[Show code]</a> + </div> + <div id="timepicker_inline_7" style="font-size: 10px; float: left; margin-left: 24px;"></div> + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_inline_7').timepicker({ + altField: '#timepicker_alt', + defaultTime: '13:30' + }); + }); + function tp7_getTime() { + $('#tp7_getTime_button').val('Selected time : ' + $('#timepicker_inline_7').timepicker('getTime')); + } + function tp7_getHourMinute() { + $('#tp7_getHourMinute_button').val( + 'Hour : ' + $('#timepicker_inline_7').timepicker('getHour') + + ', ' + + 'minute : ' + $('#timepicker_inline_7').timepicker('getMinute') + ); + } + </script> + <div style="clear: both"></div> + +<pre class="code" id="script_inline" style="display: none">$('#timepicker_inline_div').timepicker({ + altField: '#timepicker_alt_input', + defaultTime: '9:20' +}); +function setNewTime() { + $('#timepicker_inline_div').timepicker('setTime','16:55'); +} +function getTime() { + $('#getTime_button').val('Selected time : ' + $('#timepicker').timepicker('getTime')); +} +function getHourMinute() { + $('#getHourMinute_button').val( + 'Hour : ' + $('#timepicker').timepicker('getHour') + + ', ' + + 'minute : ' + $('#timepicker').timepicker('getMinute') + ); +} +</pre> + + </div> + + + <hr /> + + <div> + + Two timepickers to select chronological time range, the first timepicker is restricted to before the time selected in the second timepicker, and vice versa. Updated code to use the new minTime and maxTime options + <br> + <label for="timepicker_start">Start time :</label> + <input type="text" style="width: 70px" id="timepicker_start" value="9:15" /> + <label for="timepicker_end">end time :</label> + <input type="text" style="width: 70px" id="timepicker_end" value="16:30" /> + + <a onclick="$('#script_time_range').toggle(200); return false;">[Show code]</a> + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_start').timepicker({ + showLeadingZero: false, + onSelect: tpStartSelect, + maxTime: { + hour: 16, minute: 30 + } + }); + $('#timepicker_end').timepicker({ + showLeadingZero: false, + onSelect: tpEndSelect, + minTime: { + hour: 9, minute: 15 + } + }); + }); + + // when start time change, update minimum for end timepicker + function tpStartSelect( time, endTimePickerInst ) { + $('#timepicker_end').timepicker('option', { + minTime: { + hour: endTimePickerInst.hours, + minute: endTimePickerInst.minutes + } + }); + } + + // when end time change, update maximum for start timepicker + function tpEndSelect( time, startTimePickerInst ) { + $('#timepicker_start').timepicker('option', { + maxTime: { + hour: startTimePickerInst.hours, + minute: startTimePickerInst.minutes + } + }); + } + </script> + +<pre class="code" id="script_time_range" style="display: none"> +$(document).ready(function() { + $('#timepicker_start').timepicker({ + showLeadingZero: false, + onSelect: tpStartSelect, + maxTime: { + hour: 16, minute: 30 + } + }); + $('#timepicker_end').timepicker({ + showLeadingZero: false, + onSelect: tpEndSelect, + minTime: { + hour: 9, minute: 15 + } + }); +}); + +// when start time change, update minimum for end timepicker +function tpStartSelect( time, endTimePickerInst ) { + $('#timepicker_end').timepicker('option', { + minTime: { + hour: endTimePickerInst.hours, + minute: endTimePickerInst.minutes + } + }); +} + +// when end time change, update maximum for start timepicker +function tpEndSelect( time, startTimePickerInst ) { + $('#timepicker_start').timepicker('option', { + maxTime: { + hour: startTimePickerInst.hours, + minute: startTimePickerInst.minutes + } + }); +} +</pre> + + </div> + + + + + <hr> + <div> + <div style="float: left; width: 400px"> + Example of using the new minTime and maxTime options + <br> + <button onclick="tpMinMaxSetMinTime(9,15)">Set min time to 9:15</button> + <br> + <button onclick="tpMinMaxSetMaxTime(16,30)">Set max time to 16:30</button> + <br> + <a onclick="$('#script_tp_min_max_time').toggle(200); return false;">[Show code]</a> + </div> + + <div id="timepicker_minmax_inline" style="font-size: 10px;"></div> + <div style="clear: both"></div> + + <script> + $(document).ready(function() { + $('#timepicker_minmax_inline').timepicker({ + showLeadingZero: true + }); + }); + function tpMinMaxSetMinTime( hour, minute ) { + $('#timepicker_minmax_inline').timepicker('option', { minTime: { hour: hour, minute: minute} }); + } + function tpMinMaxSetMaxTime( hour, minute ) { + $('#timepicker_minmax_inline').timepicker('option', { maxTime: { hour: hour, minute: minute} }); + } + </script> +<pre class="code" style="display: none" id="script_tp_min_max_time"> + $('#timepicker_minmax_inline').timepicker({ + minTime: { hour: 9, minute: 15 }, + maxTime: { hour: 16, minute: 30 }, + showLeadingZero: true + }); + // to dinamically set the min and max time : + function tpMinMaxSetMinTime( hour, minute ) { + $('#timepicker_minmax_inline').timepicker('option', { minTime: { hour: hour, minute: minute} }); + } + function tpMinMaxSetMaxTime( hour, minute ) { + $('#timepicker_minmax_inline').timepicker('option', { maxTime: { hour: hour, minute: minute} }); + } +</pre> + </div> + + + <hr /> + + <div> + Example to disable and re-enable a timepicker. + + <br /> + + <div style="float:left; width: 400px"> + + <input type="text" style="width: 70px" id="timepicker_disable" value="9:15" /> + <div class="timepicker_disable_button_trigger" style="width: 16px; height:16px; background: url(include/ui-1.10.0/ui-lightness/images/ui-icons_222222_256x240.png) -80px, -96px; + display: inline-block; border-radius: 2px; border: 1px solid #222222; margin-top: 3px; cursor:pointer"></div> + <br /> + <button id="btn_disable_tp">Disable the time pickers</button> + <br /> + <button id="btn_enable_tp">Re-enable the time pickers</button> + <br /> + <a onclick="$('#script_tp_disable').toggle(200); return false;">[Show code]</a> + </div> + + <div id="timepicker_disable_inline" style="font-size: 10px;"></div> + <div style="clear: both"></div> + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_disable_inline').timepicker({ + showNowButton: true, + showCloseButton: true, + showDeselectButton: true + }); + $('#timepicker_disable').timepicker({ + showLeadingZero: false, + showOn: 'both', + button: '.timepicker_disable_button_trigger' + }); + $('#btn_disable_tp').click(function() { + $('#timepicker_disable_inline').timepicker('disable'); + $('#timepicker_disable').timepicker('disable'); + }); + $('#btn_enable_tp').click(function() { + $('#timepicker_disable_inline').timepicker('enable'); + $('#timepicker_disable').timepicker('enable'); + }); + }); + </script> + <pre class="code" style="display: none" id="script_tp_disable"> + $('#timepicker_disable_inline').timepicker(); + $('#timepicker_disable').timepicker({showLeadingZero: false }); + $('#btn_disable_tp').click(function() { + $('#timepicker_disable_inline').timepicker('disable'); + $('#timepicker_disable').timepicker('disable'); + }); + $('#btn_enable_tp').click(function() { + $('#timepicker_disable_inline').timepicker('enable'); + $('#timepicker_disable').timepicker('enable'); + }); + </pre> + </div> + + + + + <hr /> + + <div> + Set the timepicker date with a Date object and get the selected time as a Date object + <br /> + <div style="float: left; width: 400px;"> + <button id="btn_set_time_with_date_obj"> Set the time to now using the Date object </button> + <br> + <button id="btn_get_time_as_date"> Get selected time as Date object </button> + <br> + <span id="timepicker_selected_time"></span> + <br> + <span id="timepicker_selected_time_warning">Also, note that in the returned date object, the time is correct but the yeat/month/day part of the date is wrong, you have to extract the time of the object.</span> + <br> + <a onclick="$('#script_tp_date_obj').toggle(200); return false;">[Show code]</a> + </div> + <div id="timepicker_date_obj_inline" style="font-size: 10px;"></div> + <div style="clear: both"></div> + + <script type="text/javascript"> + $(document).ready(function() { + $('#timepicker_date_obj_inline').timepicker(); + + $('#btn_set_time_with_date_obj').click(function() { + var newTime = new Date('2012-11-24 7:10'); + console.log(newTime); + $('#timepicker_date_obj_inline').timepicker('setTime', newTime); + }); + $('#btn_get_time_as_date').click(function() { + var selectedTime = $('#timepicker_date_obj_inline').timepicker('getTimeAsDate'); + $('#timepicker_selected_time').html('Selected time as date object returned : ' + selectedTime.toString()); + }); + }); + </ |