summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/docs/examples.html39
-rw-r--r--src/docs/options.html5
-rw-r--r--src/i18n/jquery-ui-timepicker-mk.js22
-rw-r--r--src/jquery-ui-timepicker-addon.css3
-rw-r--r--src/jquery-ui-timepicker-addon.js38
5 files changed, 92 insertions, 15 deletions
diff --git a/src/docs/examples.html b/src/docs/examples.html
index ae94ce6..9364fba 100644
--- a/src/docs/examples.html
+++ b/src/docs/examples.html
@@ -9,6 +9,7 @@
<li><a href="#timezone_examples" title="Using Timezones">Using Timezones</a></li>
<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="#input_examples" title="Time Input">Time Input</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>
@@ -287,7 +288,7 @@ $('#alt_example_3').datetimepicker({
});
</pre>
</div>
-
+
<!-- ============= example -->
<div class="example-container">
<p>With inline mode using altField:</p>
@@ -302,6 +303,38 @@ $('#alt_example_4').datetimepicker({
});
</pre>
</div>
+
+<h3 id="input_examples">Time Input</h3>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Allows time displayed inside the picker to allow being typed in.</p>
+ <div>
+ <input type="text" name="input_example_1" id="input_example_1" value="08/20/2014 01:22 pm" />
+ </div>
+<pre>
+$('#input_example_1').datetimepicker({
+ timeInput: true,
+ timeFormat: "hh:mm tt"
+});
+</pre>
+ </div>
+
+ <!-- ============= example -->
+ <div class="example-container">
+ <p>Don't show any sliders, only the time input.</p>
+ <div>
+ <input type="text" name="input_example_1" id="input_example_2" value="08/20/2014 01:22 pm" />
+ </div>
+<pre>
+$('#input_example_2').datetimepicker({
+ timeInput: true,
+ timeFormat: "hh:mm tt",
+ showHour: false,
+ showMinute: false
+});
+</pre>
+ </div>
<h3 id="rest_examples">Time Restraints</h3>
@@ -541,6 +574,4 @@ $('#utility_example_3').text(JSON.stringify(
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
));
</pre>
- </div>
-
-</div> \ No newline at end of file
+</div>
diff --git a/src/docs/options.html b/src/docs/options.html
index 0754fb0..06201ce 100644
--- a/src/docs/options.html
+++ b/src/docs/options.html
@@ -202,7 +202,10 @@
<dl class="defs">
<dt>showButtonPanel</dt>
<dd><em>Default: true</em> - Whether to show the button panel at the bottom. This is generally needed.</dd>
-
+
+ <dt>timeInput</dt>
+ <dd><em>Default: false</em> - Allows direct input in time field</dd>
+
<dt>timeOnly</dt>
<dd><em>Default: false</em> - Hide the datepicker and only provide a time interface.</dd>
diff --git a/src/i18n/jquery-ui-timepicker-mk.js b/src/i18n/jquery-ui-timepicker-mk.js
new file mode 100644
index 0000000..9857e01
--- /dev/null
+++ b/src/i18n/jquery-ui-timepicker-mk.js
@@ -0,0 +1,22 @@
+/* Macedonian cyrilic translation for the jQuery Timepicker Addon */
+/* Written by Vlatko Ristovski */
+(function($) {
+ $.timepicker.regional['mk'] = {
+ timeOnlyTitle: 'Одберете време',
+ timeText: 'Време',
+ hourText: 'Час',
+ minuteText: 'Минути',
+ secondText: 'Секунди',
+ millisecText: 'Милисекунди',
+ microsecText: 'Микросекунди',
+ timezoneText: 'Временска зона',
+ currentText: 'Сега',
+ closeText: 'Затвори',
+ timeFormat: 'HH:mm',
+ timeSuffix: '',
+ amNames: ['AM', 'A'],
+ pmNames: ['PM', 'P'],
+ isRTL: false
+ };
+ $.timepicker.setDefaults($.timepicker.regional['mk']);
+})(jQuery); \ No newline at end of file
diff --git a/src/jquery-ui-timepicker-addon.css b/src/jquery-ui-timepicker-addon.css
index 2d9e031..586a7f0 100644
--- a/src/jquery-ui-timepicker-addon.css
+++ b/src/jquery-ui-timepicker-addon.css
@@ -6,6 +6,9 @@
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
+.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%; }
+.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
+
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
diff --git a/src/jquery-ui-timepicker-addon.js b/src/jquery-ui-timepicker-addon.js
index a9bc63e..79de1e3 100644
--- a/src/jquery-ui-timepicker-addon.js
+++ b/src/jquery-ui-timepicker-addon.js
@@ -9,7 +9,7 @@
(function (factory) {
if (typeof define === 'function' && define.amd) {
- define(['jquery', 'jquery.ui'], factory);
+ define(['jquery', 'jquery-ui'], factory);
} else {
factory(jQuery);
}
@@ -393,7 +393,7 @@
if ($dp.find("div.ui-timepicker-div").length === 0 && o.showTimepicker) {
var noDisplay = ' ui_tpicker_unit_hide',
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>' +
- '<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"></dd>';
+ '<dd class="ui_tpicker_time '+ ((o.showTime) ? '' : noDisplay) + '"><input class="ui_tpicker_time_input" ' + (o.timeInput ? '' : 'disabled') + '/></dd>';
// Create the markup
for (i = 0, l = this.units.length; i < l; i++) {
@@ -530,7 +530,21 @@
$dp.append($tp);
}
- this.$timeObj = $tp.find('.ui_tpicker_time');
+ this.$timeObj = $tp.find('.ui_tpicker_time_input');
+ this.$timeObj.change(function () {
+ var timeFormat = tp_inst.inst.settings.timeFormat;
+ var parsedTime = $.datepicker.parseTime(timeFormat, this.value);
+ var update = new Date();
+ if (parsedTime) {
+ update.setHours(parsedTime.hour);
+ update.setMinutes(parsedTime.minute);
+ update.setSeconds(parsedTime.second);
+ $.datepicker._setTime(tp_inst.inst, update);
+ } else {
+ this.value = tp_inst.formattedTime;
+ this.blur();
+ }
+ });
if (this.inst !== null) {
var timeDefined = this.timeDefined;
@@ -868,12 +882,15 @@
// Updates the time within the timepicker
this.formattedTime = $.datepicker.formatTime(o.timeFormat, this, o);
if (this.$timeObj) {
+ var sPos = this.$timeObj[0].selectionStart;
+ var ePos = this.$timeObj[0].selectionEnd;
if (pickerTimeFormat === o.timeFormat) {
- this.$timeObj.text(this.formattedTime + pickerTimeSuffix);
+ this.$timeObj.val(this.formattedTime + pickerTimeSuffix);
}
else {
- this.$timeObj.text($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
+ this.$timeObj.val($.datepicker.formatTime(pickerTimeFormat, this, o) + pickerTimeSuffix);
}
+ this.$timeObj[0].setSelectionRange(sPos, ePos);
}
this.timeDefined = true;
@@ -1548,18 +1565,19 @@
};
/*
- * override "Today" button to also grab the time.
+ * override "Today" button to also grab the time and set it to input field.
*/
$.datepicker._base_gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function (id) {
- var inst = this._getInst($(id)[0]),
- $dp = inst.dpDiv;
+ var inst = this._getInst($(id)[0]);
+ this._base_gotoToday(id);
var tp_inst = this._get(inst, 'timepicker');
- selectLocalTimezone(tp_inst);
+ var tzoffset = $.timepicker.timezoneOffsetNumber(tp_inst.timezone);
var now = new Date();
+ now.setMinutes(now.getMinutes() + now.getTimezoneOffset() + tzoffset);
this._setTime(inst, now);
this._setDate(inst, now);
- this._base_gotoToday(id);
+ tp_inst._onSelectHandler();
};
/*
generated by cgit v1.1 at 2025-05-10 19:18:55 +0000