diff options
| -rw-r--r-- | index.html | 66 | ||||
| -rw-r--r-- | jquery-ui-timepicker-addon.js | 12 |
2 files changed, 63 insertions, 15 deletions
@@ -423,16 +423,62 @@ $('#example14').datetimepicker({ }); </pre> </div> + + + <!-- ============= example --> + <div class="example-container"> + <p>Use the utility function to format your own time. $.datepicker.formatTime(format, time, options)</p> + <dl> + <dt>timezoneList</dt><dd>An array of timezones, either with strings ['-0500','-0600',..] or objects [ { value: '-0500', label: 'EST'}, { value: '-0600', label: 'CST' },..]</dd> + <dt>timezoneIso8601</dt><dd>Formats the timezones in the timezone list in 8601 format + </dl> + + <div> + <input type="text" name="example15a" id="example15a" value="" /> + <input type="text" name="example15b" id="example15b" value="" /> + <input type="text" name="example15c" id="example15c" value="" /> + </div> +<pre> +$('#example15a').datetimepicker({ + timeFormat: 'hh:mm z', + showTimezone: true +}); + +$('#example15b').datetimepicker({ + timeFormat: 'hh:mm z', + showTimezone: true, + timezoneList: [ + { value: '-0500', label: 'Eastern'}, + { value: '-0600', label: 'Central' }, + { value: '-0700', label: 'Mountain' }, + { value: '-0800', label: 'Pacific' } + ] +}); + +$('#example15c').datetimepicker({ + timeFormat: 'hh:mm z', + showTimezone: true, + timezone: 'MT', + timezoneList: [ + { value: 'ET', label: 'Eastern'}, + { value: 'CT', label: 'Central' }, + { value: 'MT', label: 'Mountain' }, + { value: 'PT', label: 'Pacific' } + ] +}); +</pre> + </div> + <!-- ============= example --> <div class="example-container"> <p>Connect to the onSelect event (Use your browser's js console for this example).</p> <div> - <input type="text" name="example15" id="example15" value="" /> + <input type="text" name="example16" id="example15" value="" /> </div> <pre> -$('#example15').datetimepicker({ +$('#example16').datetimepicker({ showSecond: true, showMillisec: true, timeFormat: 'hh:mm:ss:l', @@ -448,12 +494,12 @@ $('#example15').datetimepicker({ <div class="example-container"> <p>Create a datetime range with a start and end date.</p> <div> - <input type="text" name="example16_start" id="example16_start" value="" /> <input type="text" name="example16_end" id="example16_end" value="" /> + <input type="text" name="example17_start" id="example17_start" value="" /> <input type="text" name="example17_end" id="example17_end" value="" /> </div> <pre> -var startDateTextBox = $('#example16_start'); -var endDateTextBox = $('#example16_end'); +var startDateTextBox = $('#example17_start'); +var endDateTextBox = $('#example17_end'); startDateTextBox.datetimepicker({ onClose: function(dateText, inst) { @@ -494,11 +540,11 @@ endDateTextBox.datetimepicker({ <div class="example-container"> <p>Use the <a href="http://trentrichardson.com/2011/11/11/jquery-ui-sliders-and-touch-accessibility/" title="jQueryUI Slider Accessibility Addon">sliderAccess addon</a> to allow timepicker sliders to work on touch devices.</p> <div> - <div id="example17"></div> + <div id="example18"></div> </div> <pre> -$('#example17').datetimepicker({ +$('#example18').datetimepicker({ addSliderAccess: true, sliderAccessArgs: { touchonly: false } }); @@ -516,15 +562,17 @@ $('#example17').datetimepicker({ </dl> <div> - <div id="example18"></div> + <div id="example19"></div> </div> <pre> -$('#example18').text( +$('#example19').text( $.datepicker.formatTime('hh:mm z', { hour: 14, minute: 36, timezone: '+2000' }, { ampm: false }) ); </pre> </div> + + <h2>Version</h2> <p>Version 1.0.2</p> diff --git a/jquery-ui-timepicker-addon.js b/jquery-ui-timepicker-addon.js index a26c692..09b056b 100644 --- a/jquery-ui-timepicker-addon.js +++ b/jquery-ui-timepicker-addon.js @@ -41,8 +41,8 @@ function Timepicker() { currentText: 'Now', closeText: 'Done', ampm: false, - amNames: ['AM', 'A'], - pmNames: ['PM', 'P'], + amNames: ['am', 'a'], + pmNames: ['pm', 'p'], timeFormat: 'hh:mm tt', timeSuffix: '', timeOnlyTitle: 'Choose Time', @@ -185,12 +185,12 @@ $.extend(Timepicker.prototype, { var timezoneList = []; for (var i = -11; i <= 12; i++) { timezoneList.push((i >= 0 ? '+' : '-') + ('0' + Math.abs(i).toString()).slice(-2) + '00'); - } + } if (tp_inst._defaults.timezoneIso8601) { timezoneList = $.map(timezoneList, function(val) { return val == '+0000' ? 'Z' : (val.substring(0, 3) + ':' + val.substring(3)); }); - } + } tp_inst._defaults.timezoneList = timezoneList; } @@ -952,7 +952,7 @@ $.datepicker.parseTime = function(timeFormat, timeString, options) { .replace(/s{1,2}/ig, '(\\d?\\d)') .replace(/l{1}/ig, '(\\d?\\d?\\d)') .replace(/t{1,2}/ig, getPatternAmpm(o.amNames, o.pmNames)) - .replace(/z{1}/ig, '(z|[-+]\\d\\d:?\\d\\d)?') + .replace(/z{1}/ig, '(z|[-+]\\d\\d:?\\d\\d|\\S+)?') .replace(/\s/g, '\\s?') + o.timeSuffix + '$', order = getFormatPositions(timeFormat), ampm = '', @@ -1063,7 +1063,7 @@ $.datepicker.formatTime = function(format, time, options) { if (match.length == 1) { ampmName = ampmName.charAt(0); } - return match.charAt(0) == 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase(); + return match.charAt(0) === 'T' ? ampmName.toUpperCase() : ampmName.toLowerCase(); } return ''; } |