Skip to content

Commit 650df7f

Browse files
trentrichardsontrentrichardson
committed
Merge branch 'insonifi-dev' into dev
2 parents 47dbb0f + 829ffa7 commit 650df7f

11 files changed

+184
-21
lines changed

‎dist/i18n/jquery-ui-timepicker-addon-i18n.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,10 @@ <h3>Other Options</h3>
325325
<dl class="defs">
326326
<dt>showButtonPanel</dt>
327327
<dd><em>Default: true</em> - Whether to show the button panel at the bottom. This is generally needed.</dd>
328-
328+
329+
<dt>timeInput</dt>
330+
<dd><em>Default: false</em> - Allows direct input in time field</dd>
331+
329332
<dt>timeOnly</dt>
330333
<dd><em>Default: false</em> - Hide the datepicker and only provide a time interface.</dd>
331334

@@ -517,6 +520,7 @@ <h2>Examples</h2>
517520
<li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
518521
<li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
519522
<li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
523+
<li><a href="#input_examples" title="Time Input">Time Input</a></li>
520524
<li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
521525
<li><a href="#range_examples" title="Time Ranges">Time Ranges</a></li>
522526
<li><a href="#utility_examples" title="Utilities">Utilities</a></li>
@@ -795,7 +799,7 @@ <h3 id="alt_examples">Alternate Fields</h3>
795799
});
796800
</pre>
797801
</div>
798-
802+
799803
<!-- ============= example -->
800804
<div class="example-container">
801805
<p>With inline mode using altField:</p>
@@ -808,6 +812,38 @@ <h3 id="alt_examples">Alternate Fields</h3>
808812
altField: "#alt_example_4_alt",
809813
altFieldTimeOnly: false
810814
});
815+
</pre>
816+
</div>
817+
818+
<h3 id="input_examples">Time Input</h3>
819+
820+
<!-- ============= example -->
821+
<div class="example-container">
822+
<p>Allows time displayed inside the picker to allow being typed in.</p>
823+
<div>
824+
<input type="text" name="input_example_1" id="input_example_1" value="08/20/2014 01:22 pm" />
825+
</div>
826+
<pre>
827+
$('#input_example_1').datetimepicker({
828+
timeInput: true,
829+
timeFormat: "hh:mm tt"
830+
});
831+
</pre>
832+
</div>
833+
834+
<!-- ============= example -->
835+
<div class="example-container">
836+
<p>Don't show any sliders, only the time input.</p>
837+
<div>
838+
<input type="text" name="input_example_1" id="input_example_2" value="08/20/2014 01:22 pm" />
839+
</div>
840+
<pre>
841+
$('#input_example_2').datetimepicker({
842+
timeInput: true,
843+
timeFormat: "hh:mm tt",
844+
showHour: false,
845+
showMinute: false
846+
});
811847
</pre>
812848
</div>
813849

@@ -1049,9 +1085,8 @@ <h3 id="utility_examples">Utilities</h3>
10491085
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
10501086
));
10511087
</pre>
1052-
</div>
1053-
10541088
</div>
1089+
10551090
</div>
10561091

10571092

‎dist/jquery-ui-timepicker-addon.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
77
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
88

9+
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
10+
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
11+
912
.ui-timepicker-rtl{ direction: rtl; }
1013
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
1114
.ui-timepicker-rtl dl dt{ float: right; clear: right; }

‎dist/jquery-ui-timepicker-addon.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -387,7 +387,7 @@
387387
if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
388388
var noDisplay = ' ui_tpicker_unit_hide',
389389
html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + (o.oneLine && o.controlType === 'select' ? ' ui-timepicker-oneLine' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label' + ((o.showTime) ? '' : noDisplay) + '">' + o.timeText + '</dt>' +
390-
'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"></dd>';
390+
'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"><input class="ui_tpicker_time_input" ' + (o.timeInput ? '' : 'disabled') + '/></dd>';
391391

392392
// Create the markup
393393
for (i = 0, l = this.units.length; i < l; i++) {
@@ -524,7 +524,21 @@
524524
$dp.append($tp);
525525
}
526526

527-
this.$timeObj = $tp.find('.ui_tpicker_time');
527+
this.$timeObj = $tp.find('.ui_tpicker_time_input');
528+
this.$timeObj.change(function () {
529+
var timeFormat = tp_inst.inst.settings.timeFormat;
530+
var parsedTime = $.datepicker.parseTime(timeFormat, this.value);
531+
var update = new Date();
532+
if (parsedTime) {
533+
update.setHours(parsedTime.hour);
534+
update.setMinutes(parsedTime.minute);
535+
update.setSeconds(parsedTime.second);
536+
$.datepicker._setTime(tp_inst.inst, update);
537+
} else {
538+
this.value = tp_inst.formattedTime;
539+
this.blur();
540+
}
541+
});
528542

529543
if (this.inst !== null) {
530544
var timeDefined = this.timeDefined;
@@ -862,12 +876,15 @@
862876
// Updates the time within the timepicker
863877
this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o);
864878
if (this.$timeObj) {
879+
var sPos = this.$timeObj[0].selectionStart;
880+
var ePos = this.$timeObj[0].selectionEnd;
865881
if (pickerTimeFormat === o.timeFormat) {
866-
this.$timeObj.text(this.formattedTime + pickerTimeSuffix);
882+
this.$timeObj.val(this.formattedTime + pickerTimeSuffix);
867883
}
868884
else {
869-
this.$timeObj.text($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
885+
this.$timeObj.val($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
870886
}
887+
this.$timeObj[0].setSelectionRange(sPos, ePos);
871888
}
872889

873890
this.timeDefined = true;

‎dist/jquery-ui-timepicker-addon.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/jquery-ui-timepicker-addon.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/docs/examples.html

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ <h2>Examples</h2>
99
<li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
1010
<li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
1111
<li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
12+
<li><a href="#input_examples" title="Time Input">Time Input</a></li>
1213
<li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
1314
<li><a href="#range_examples" title="Time Ranges">Time Ranges</a></li>
1415
<li><a href="#utility_examples" title="Utilities">Utilities</a></li>
@@ -287,7 +288,7 @@ <h3 id="alt_examples">Alternate Fields</h3>
287288
});
288289
</pre>
289290
</div>
290-
291+
291292
<!-- ============= example -->
292293
<div class="example-container">
293294
<p>With inline mode using altField:</p>
@@ -300,6 +301,38 @@ <h3 id="alt_examples">Alternate Fields</h3>
300301
altField: "#alt_example_4_alt",
301302
altFieldTimeOnly: false
302303
});
304+
</pre>
305+
</div>
306+
307+
<h3 id="input_examples">Time Input</h3>
308+
309+
<!-- ============= example -->
310+
<div class="example-container">
311+
<p>Allows time displayed inside the picker to allow being typed in.</p>
312+
<div>
313+
<input type="text" name="input_example_1" id="input_example_1" value="08/20/2014 01:22 pm" />
314+
</div>
315+
<pre>
316+
$('#input_example_1').datetimepicker({
317+
timeInput: true,
318+
timeFormat: "hh:mm tt"
319+
});
320+
</pre>
321+
</div>
322+
323+
<!-- ============= example -->
324+
<div class="example-container">
325+
<p>Don't show any sliders, only the time input.</p>
326+
<div>
327+
<input type="text" name="input_example_1" id="input_example_2" value="08/20/2014 01:22 pm" />
328+
</div>
329+
<pre>
330+
$('#input_example_2').datetimepicker({
331+
timeInput: true,
332+
timeFormat: "hh:mm tt",
333+
showHour: false,
334+
showMinute: false
335+
});
303336
</pre>
304337
</div>
305338

@@ -541,6 +574,4 @@ <h3 id="utility_examples">Utilities</h3>
541574
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
542575
));
543576
</pre>
544-
</div>
545-
546-
</div>
577+
</div>

‎src/docs/options.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,10 @@ <h3>Other Options</h3>
202202
<dl class="defs">
203203
<dt>showButtonPanel</dt>
204204
<dd><em>Default: true</em> - Whether to show the button panel at the bottom. This is generally needed.</dd>
205-
205+
206+
<dt>timeInput</dt>
207+
<dd><em>Default: false</em> - Allows direct input in time field</dd>
208+
206209
<dt>timeOnly</dt>
207210
<dd><em>Default: false</em> - Hide the datepicker and only provide a time interface.</dd>
208211

‎src/jquery-ui-timepicker-addon.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
77
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
88

9+
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
10+
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
11+
912
.ui-timepicker-rtl{ direction: rtl; }
1013
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
1114
.ui-timepicker-rtl dl dt{ float: right; clear: right; }

‎src/jquery-ui-timepicker-addon.js

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -393,7 +393,7 @@
393393
if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
394394
var noDisplay = ' ui_tpicker_unit_hide',
395395
html = '<div class="ui-timepicker-div' + (o.isRTL ? ' ui-timepicker-rtl' : '') + (o.oneLine && o.controlType === 'select' ? ' ui-timepicker-oneLine' : '') + '"><dl>' + '<dt class="ui_tpicker_time_label' + ((o.showTime) ? '' : noDisplay) + '">' + o.timeText + '</dt>' +
396-
'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"></dd>';
396+
'<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"><input class="ui_tpicker_time_input" ' + (o.timeInput ? '' : 'disabled') + '/></dd>';
397397

398398
// Create the markup
399399
for (i = 0, l = this.units.length; i < l; i++) {
@@ -530,7 +530,21 @@
530530
$dp.append($tp);
531531
}
532532

533-
this.$timeObj = $tp.find('.ui_tpicker_time');
533+
this.$timeObj = $tp.find('.ui_tpicker_time_input');
534+
this.$timeObj.change(function () {
535+
var timeFormat = tp_inst.inst.settings.timeFormat;
536+
var parsedTime = $.datepicker.parseTime(timeFormat, this.value);
537+
var update = new Date();
538+
if (parsedTime) {
539+
update.setHours(parsedTime.hour);
540+
update.setMinutes(parsedTime.minute);
541+
update.setSeconds(parsedTime.second);
542+
$.datepicker._setTime(tp_inst.inst, update);
543+
} else {
544+
this.value = tp_inst.formattedTime;
545+
this.blur();
546+
}
547+
});
534548

535549
if (this.inst !== null) {
536550
var timeDefined = this.timeDefined;
@@ -868,12 +882,15 @@
868882
// Updates the time within the timepicker
869883
this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o);
870884
if (this.$timeObj) {
885+
var sPos = this.$timeObj[0].selectionStart;
886+
var ePos = this.$timeObj[0].selectionEnd;
871887
if (pickerTimeFormat === o.timeFormat) {
872-
this.$timeObj.text(this.formattedTime + pickerTimeSuffix);
888+
this.$timeObj.val(this.formattedTime + pickerTimeSuffix);
873889
}
874890
else {
875-
this.$timeObj.text($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
891+
this.$timeObj.val($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
876892
}
893+
this.$timeObj[0].setSelectionRange(sPos, ePos);
877894
}
878895

879896
this.timeDefined = true;

‎test/jquery-ui-timepicker-addon_spec.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -696,4 +696,58 @@ describe('datetimepicker', function() {
696696
expect(inputFocusSpy).not.toHaveBeenCalled();
697697
});
698698
});
699+
700+
describe('timeInput', function () {
701+
var $input;
702+
beforeEach(function () {
703+
$input = affix('input');
704+
});
705+
describe('option', function () {
706+
it('just display, input disabled', function () {
707+
$input.datetimepicker();
708+
$input.trigger('focus');
709+
var $timeInput = $('.ui_tpicker_time_input');
710+
expect($timeInput.attr('disabled')).toBe('disabled');
711+
});
712+
713+
it('allow type new time', function () {
714+
$input.datetimepicker({timeInput: true});
715+
$input.trigger('focus');
716+
var $timeInput = $('.ui_tpicker_time_input');
717+
expect($timeInput.attr('disabled')).toBeUndefined();
718+
});
719+
});
720+
721+
describe('behavior', function () {
722+
beforeEach(function () {
723+
$input.datetimepicker({timeInput: true});
724+
$input.trigger('focus');
725+
});
726+
it('should update timepicker time', function () {
727+
var inputTime = '12:34';
728+
var inst = $.datepicker._getInst($input.get(0));
729+
var tp_inst = $.datepicker._get(inst, 'timepicker');
730+
var $timeInput = inst.dpDiv.find('.ui_tpicker_time_input');
731+
732+
$timeInput.val(inputTime).trigger('change');
733+
expect(tp_inst.formattedTime).toEqual(inputTime);
734+
});
735+
it('revert to previous time value if input is invalid', function () {
736+
var invalidTime = '123:456';
737+
var inst = $.datepicker._getInst($input.get(0));
738+
var tp_inst = $.datepicker._get(inst, 'timepicker');
739+
var $timeInput = inst.dpDiv.find('.ui_tpicker_time_input');
740+
741+
var previousTimeString = tp_inst.formattedTime;
742+
$timeInput.val(invalidTime).trigger('change');
743+
expect(tp_inst.formattedTime).toEqual(previousTimeString);
744+
});
745+
});
746+
747+
afterEach(function () {
748+
var $widget = $input.datepicker('widget');
749+
$input.datepicker('destroy');
750+
$widget.remove();
751+
});
752+
});
699753
});

0 commit comments

Comments
 (0)