Skip to content

Commit 829ffa7

Browse files
trentrichardsontrentrichardson
committed
Clean up some styles, missing semicolons, add example
1 parent a165d60 commit 829ffa7

9 files changed

+103
-29
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: 33 additions & 14 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,20 +288,6 @@ <h3 id="alt_examples">Alternate Fields</h3>
287288
});
288289
</pre>
289290
</div>
290-
</div>
291-
<h3 id="input_examples">Time Input</h3>
292-
<!-- ============= example -->
293-
<div class="example-container">
294-
<p>Allows for direct input of time string</p>
295-
<div>
296-
<input type="text" name="input_example_1" id="input_example_1" value="08/20/2014 09:22 -0400" />
297-
</div>
298-
<pre>
299-
$('#input_example_1').datetimepicker(
300-
timeInput: true
301-
);
302-
</pre>
303-
</div>
304291

305292
<!-- ============= example -->
306293
<div class="example-container">
@@ -314,6 +301,38 @@ <h3 id="input_examples">Time Input</h3>
314301
altField: "#alt_example_4_alt",
315302
altFieldTimeOnly: false
316303
});
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+
});
317336
</pre>
318337
</div>
319338

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
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-style: none; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: grey; width: 100%; }
10-
.ui-timepicker-div.ui_tpicker_time.ui_tpicker_time_input:focus { border-bottom-color: white; }
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; }
1111

1212
.ui-timepicker-rtl{ direction: rtl; }
1313
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -544,7 +544,7 @@
544544
this.value = tp_inst.formattedTime;
545545
this.blur();
546546
}
547-
})
547+
});
548548

549549
if (this.inst !== null) {
550550
var timeDefined = this.timeDefined;

0 commit comments

Comments
 (0)