diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/docs/examples.html | 85 | ||||
| -rw-r--r-- | src/jquery-ui-timepicker-addon.js | 34 |
2 files changed, 108 insertions, 11 deletions
diff --git a/src/docs/examples.html b/src/docs/examples.html index 587b0f1..4765039 100644 --- a/src/docs/examples.html +++ b/src/docs/examples.html @@ -10,6 +10,7 @@ <li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li> <li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li> <li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li> + <li><a href="#range_examples" title="Time Ranges">Time Ranges</a></li> <li><a href="#utility_examples" title="Utilities">Utilities</a></li> </ul> @@ -333,17 +334,20 @@ $('#rest_example_3').datetimepicker({ </pre> </div> + + <h3 id="range_examples">Time Ranges</h3> + <!-- ============= example --> <div class="example-container"> <p>Restrict a start and end date by using onSelect and onClose events for more control over functionality:</p> <p>For more examples and advanced usage grab the <a href="http://trentrichardson.com/ebooks/handling-time/" title="Handling Time eBook">Handling Time eBook</a>.</p> <div> - <input type="text" name="rest_example_4_start" id="rest_example_4_start" value="" /> - <input type="text" name="rest_example_4_end" id="rest_example_4_end" value="" /> + <input type="text" name="range_example_1_start" id="range_example_1_start" value="08/20/2014 09:22 -0400" /> + <input type="text" name="range_example_1_end" id="range_example_1_end" value="08/21/2014 08:00 -0400" /> </div> <pre> -var startDateTextBox = $('#rest_example_4_start'); -var endDateTextBox = $('#rest_example_4_end'); +var startDateTextBox = $('#range_example_1_start'); +var endDateTextBox = $('#range_example_1_end'); startDateTextBox.datetimepicker({ timeFormat: 'HH:mm z', @@ -382,6 +386,79 @@ endDateTextBox.datetimepicker({ </pre> </div> + <!-- ============= example --> + <div class="example-container"> + <p>Timepicker also includes some shortcut methods for ranges:</p> + <div> + <input type="text" name="range_example_2_start" id="range_example_2_start" value="21 Aug 2014 09:16" /> + <input type="text" name="range_example_2_end" id="range_example_2_end" value="21 Aug 2014 10:16" /> + </div> +<pre> +var startDateTextBox = $('#range_example_2_start'); +var endDateTextBox = $('#range_example_2_end'); + +$.timepicker.datetimeRange( + startDateTextBox, + endDateTextBox, + { + minInterval: (1000*60*60), // 1hr + dateFormat: 'dd M yy', + timeFormat: 'HH:mm', + start: {}, // start picker options + end: {} // end picker options + } +); +</pre> + </div> + + <!-- ============= example --> + <div class="example-container"> + <p>To use only times for a time range use $.timepicker.timeRange():</p> + <div> + <input type="text" name="range_example_3_start" id="range_example_3_start" value="09:16" /> + <input type="text" name="range_example_3_end" id="range_example_3_end" value="10:16" /> + </div> +<pre> +var startTimeTextBox = $('#range_example_3_start'); +var endTimeTextBox = $('#range_example_3_end'); + +$.timepicker.timeRange( + startTimeTextBox, + endTimeTextBox, + { + minInterval: (1000*60*60), // 1hr + timeFormat: 'HH:mm', + start: {}, // start picker options + end: {} // end picker options + } +); +</pre> + </div> + + <!-- ============= example --> + <div class="example-container"> + <p>Even though this plugin focuses on datetime, it also provides a dateRange function:</p> + <div> + <input type="text" name="range_example_4_start" id="range_example_4_start" value="" /> + <input type="text" name="range_example_4_end" id="range_example_4_end" value="" /> + </div> +<pre> +var startDateTextBox = $('#range_example_4_start'); +var endDateTextBox = $('#range_example_4_end'); + +$.timepicker.dateRange( + startDateTextBox, + endDateTextBox, + { + minInterval: (1000*60*60*24*4), // 4 days + maxInterval: (1000*60*60*24*8), // 8 days + start: {}, // start picker options + end: {} // end picker options + } +); +</pre> + </div> + <h3 id="utility_examples">Utilities</h3> <!-- ============= example --> diff --git a/src/jquery-ui-timepicker-addon.js b/src/jquery-ui-timepicker-addon.js index f57e162..58d6653 100644 --- a/src/jquery-ui-timepicker-addon.js +++ b/src/jquery-ui-timepicker-addon.js @@ -1038,7 +1038,7 @@ // select methods select: { create: function (tp_inst, obj, unit, val, min, max, step) { - var sel = '<select class="ui-timepicker-select" data-unit="' + unit + '" data-min="' + min + '" data-max="' + max + '" data-step="' + step + '">', + var sel = '<select class="ui-timepicker-select ui-state-default ui-corner-all" data-unit="' + unit + '" data-min="' + min + '" data-max="' + max + '" data-step="' + step + '">', format = tp_inst._defaults.pickerTimeFormat || tp_inst._defaults.timeFormat; for (var i = min; i <= max; i += step) { @@ -1393,14 +1393,17 @@ $.datepicker._base_selectDate = $.datepicker._selectDate; $.datepicker._selectDate = function (id, dateStr) { var inst = this._getInst($(id)[0]), - tp_inst = this._get(inst, 'timepicker'); + tp_inst = this._get(inst, 'timepicker'), + was_inline; if (tp_inst && inst.settings.showTimepicker) { tp_inst._limitMinMaxDateTime(inst, true); + was_inline = inst.inline; inst.inline = inst.stay_open = true; //This way the onSelect handler called from calendarpicker get the full dateTime this._base_selectDate(id, dateStr); - inst.inline = inst.stay_open = false; + inst.inline = was_inline; + inst.stay_open = false; this._notifyChange(inst); this._updateDatepicker(inst); } else { @@ -1535,7 +1538,7 @@ selectLocalTimezone(tp_inst); var now = new Date(); this._setTime(inst, now); - $('.ui-datepicker-today', $dp).click(); + this._setDate(inst, now); }; /* @@ -1767,7 +1770,10 @@ onselect = null, overrides = tp_inst._defaults.evnts, fns = {}, - prop; + prop, + ret, + oldVal, + $target; if (typeof name === 'string') { // if min/max was set with the string if (name === 'minDate' || name === 'minDateTime') { min = value; @@ -1825,6 +1831,17 @@ } else if (onselect) { tp_inst._defaults.onSelect = onselect; } + + // Datepicker will override our date when we call _base_optionDatepicker when + // calling minDate/maxDate, so we will first grab the value, call + // _base_optionDatepicker, then set our value back. + if(min || max){ + $target = $(target); + oldVal = $target.datetimepicker('getDate'); + ret = this._base_optionDatepicker.call($.datepicker, target, name_clone || name, value); + $target.datetimepicker('setDate', oldVal); + return ret; + } } if (value === undefined) { return this._base_optionDatepicker.call($.datepicker, target, name); @@ -2133,6 +2150,7 @@ date.setMilliseconds(date.getMilliseconds() - options.minInterval); } } + if (date.getTime) { other[method].call(other, 'option', option, date); } @@ -2158,8 +2176,10 @@ }, options, options.end)); checkDates(startTime, endTime); + selected(startTime, endTime, 'minDate'); selected(endTime, startTime, 'maxDate'); + return $([startTime.get(0), endTime.get(0)]); }; @@ -2168,9 +2188,9 @@ * @param {Object} err pass any type object to log to the console during error or debugging * @return {void} */ - $.timepicker.log = function (err) { + $.timepicker.log = function () { if (window.console) { - window.console.log(err); + window.console.log.apply(window.console, Array.prototype.slice.call(arguments)); } }; |