1 | /*
|
---|
2 | * jQuery Mobile Framework : plugin to provide a date and time picker.
|
---|
3 | * Copyright (c) JTSage
|
---|
4 | * CC 3.0 Attribution. May be relicensed without permission/notification.
|
---|
5 | * https://github.com/jtsage/jquery-mobile-datebox
|
---|
6 | */
|
---|
7 |
|
---|
8 | (function($) {
|
---|
9 | $.extend( $.mobile.datebox.prototype.options, {
|
---|
10 | themeButton: 'a',
|
---|
11 | themeInput: 'a',
|
---|
12 | useSetButton: true,
|
---|
13 | validHours: false,
|
---|
14 | repButton: true
|
---|
15 |
|
---|
16 | });
|
---|
17 | $.extend( $.mobile.datebox.prototype, {
|
---|
18 | _dbox_run: function() {
|
---|
19 | var w = this;
|
---|
20 | w.drag.didRun = true;
|
---|
21 | w._offset(w.drag.target[0], w.drag.target[1], false);
|
---|
22 | w._dbox_run_update();
|
---|
23 | w.runButton = setTimeout(function() {w._dbox_run();}, 150);
|
---|
24 | },
|
---|
25 | _dbox_run_update: function() {
|
---|
26 | var w = this,
|
---|
27 | o = this.options;
|
---|
28 |
|
---|
29 | if ( o.mode === 'datebox' ) {
|
---|
30 | w.d.intHTML.find('.ui-datebox-header').find('h4').text(w._formatter(w.__('headerFormat'), w.theDate));
|
---|
31 | }
|
---|
32 |
|
---|
33 | w.d.divIn.find('input').each(function () {
|
---|
34 | switch ( $(this).jqmData('field') ) {
|
---|
35 | case 'y':
|
---|
36 | $(this).val(w.theDate.getFullYear()); break;
|
---|
37 | case 'm':
|
---|
38 | $(this).val(w.theDate.getMonth() + 1); break;
|
---|
39 | case 'd':
|
---|
40 | $(this).val(w.theDate.getDate()); break;
|
---|
41 | case 'h':
|
---|
42 | if ( w.__('timeFormat') === 12 ) {
|
---|
43 | if ( w.theDate.getHours() > 12 ) {
|
---|
44 | $(this).val(w.theDate.getHours()-12); break;
|
---|
45 | } else if ( w.theDate.getHours() === 0 ) {
|
---|
46 | $(this).val(12); break;
|
---|
47 | }
|
---|
48 | }
|
---|
49 | $(this).val(w.theDate.getHours()); break;
|
---|
50 | case 'i':
|
---|
51 | $(this).val(w._zPad(w.theDate.getMinutes())); break;
|
---|
52 | case 'M':
|
---|
53 | $(this).val(w.__('monthsOfYearShort')[w.theDate.getMonth()]); break;
|
---|
54 | case 'a':
|
---|
55 | $(this).val((w.theDate.getHours() > 11)?w.__('meridiem')[1]:w.__('meridiem')[0]);
|
---|
56 | break;
|
---|
57 | }
|
---|
58 | });
|
---|
59 | },
|
---|
60 | _dbox_vhour: function (delta) {
|
---|
61 | var w = this,
|
---|
62 | o = this.options, tmp,
|
---|
63 | closeya = [25,0],
|
---|
64 | closenay = [25,0];
|
---|
65 |
|
---|
66 | if ( o.validHours === false ) { return true; }
|
---|
67 | if ( $.inArray(w.theDate.getHours(), o.validHours) > -1 ) { return true; }
|
---|
68 |
|
---|
69 | tmp = w.theDate.getHours();
|
---|
70 | $.each(o.validHours, function(){
|
---|
71 | if ( ((tmp < this)?1:-1) === delta ) {
|
---|
72 | if ( closeya[0] > Math.abs(this-tmp) ) {
|
---|
73 | closeya = [Math.abs(this-tmp),parseInt(this,10)];
|
---|
74 | }
|
---|
75 | } else {
|
---|
76 | if ( closenay[0] > Math.abs(this-tmp) ) {
|
---|
77 | closenay = [Math.abs(this-tmp),parseInt(this,10)];
|
---|
78 | }
|
---|
79 | }
|
---|
80 | });
|
---|
81 | if ( closeya[1] !== 0 ) { w.theDate.setHours(closeya[1]); }
|
---|
82 | else { w.theDate.setHours(closenay[1]); }
|
---|
83 | },
|
---|
84 | _dbox_enter: function (item) {
|
---|
85 | var w = this;
|
---|
86 |
|
---|
87 | if ( item.jqmData('field') === 'M' && $.inArray(item.val(), w.__('monthsOfYearShort')) > -1 ) {
|
---|
88 | w.theDate.setMonth($.inArray(item.val(), w.__('monthsOfYearShort')));
|
---|
89 | }
|
---|
90 |
|
---|
91 | if ( item.val() !== '' && item.val().toString().search(/^[0-9]+$/) === 0 ) {
|
---|
92 | switch ( item.jqmData('field') ) {
|
---|
93 | case 'y':
|
---|
94 | w.theDate.setFullYear(parseInt(item.val(),10)); break;
|
---|
95 | case 'm':
|
---|
96 | w.theDate.setMonth(parseInt(item.val(),10)-1); break;
|
---|
97 | case 'd':
|
---|
98 | w.theDate.setDate(parseInt(item.val(),10)); break;
|
---|
99 | case 'h':
|
---|
100 | w.theDate.setHours(parseInt(item.val(),10)); break;
|
---|
101 | case 'i':
|
---|
102 | w.theDate.setMinutes(parseInt(item.val(),10)); break;
|
---|
103 | }
|
---|
104 | }
|
---|
105 | w.refresh();
|
---|
106 | }
|
---|
107 | });
|
---|
108 | $.extend( $.mobile.datebox.prototype._build, {
|
---|
109 | 'timebox': function () {
|
---|
110 | this._build.datebox.apply(this,[]);
|
---|
111 | },
|
---|
112 | 'datebox': function () {
|
---|
113 | var w = this,
|
---|
114 | g = this.drag,
|
---|
115 | o = this.options, i, y, tmp, cnt = -2,
|
---|
116 | uid = 'ui-datebox-',
|
---|
117 | divBase = $("<div>"),
|
---|
118 | divPlus = $('<fieldset>'),
|
---|
119 | divIn = divBase.clone(),
|
---|
120 | divMinus = divPlus.clone(),
|
---|
121 | inBase = $("<input type='"+w.inputType+"' />").addClass('ui-input-text ui-corner-all ui-shadow-inset ui-body-'+o.themeInput),
|
---|
122 | inBaseT = $("<input type='text' />").addClass('ui-input-text ui-corner-all ui-shadow-inset ui-body-'+o.themeInput),
|
---|
123 | butBase = $("<div></div>"),
|
---|
124 | butPTheme = {theme: o.themeButton, icon: 'plus', iconpos: 'bottom', corners:true, shadow:true, inline:true},
|
---|
125 | butMTheme = $.extend({}, butPTheme, {icon: 'minus', iconpos: 'top'});
|
---|
126 |
|
---|
127 | if ( typeof w.d.intHTML !== 'boolean' ) {
|
---|
128 | w.d.intHTML.empty().remove();
|
---|
129 | }
|
---|
130 |
|
---|
131 | w.d.headerText = ((w._grabLabel() !== false)?w._grabLabel():((o.mode==='datebox')?w.__('titleDateDialogLabel'):w.__('titleTimeDialogLabel')));
|
---|
132 | w.d.intHTML = $('<span>');
|
---|
133 |
|
---|
134 | if ( w.inputType !== 'number' ) { inBase.attr('pattern', '[0-9]*'); }
|
---|
135 |
|
---|
136 | w.fldOrder = ((o.mode==='datebox')?w.__('dateFieldOrder'):w.__('timeFieldOrder'));
|
---|
137 | w._check();
|
---|
138 | w._minStepFix();
|
---|
139 | w._dbox_vhour(typeof w._dbox_delta !== 'undefined'?w._dbox_delta:1);
|
---|
140 |
|
---|
141 | if ( o.mode === 'datebox' ) { $('<div class="'+uid+'header"><h4>'+w._formatter(w.__('headerFormat'), w.theDate)+'</h4></div>').appendTo(w.d.intHTML); }
|
---|
142 |
|
---|
143 | for(i=0; i<=w.fldOrder.length; i++) {
|
---|
144 | tmp = ['a','b','c','d','e','f'][i];
|
---|
145 | switch (w.fldOrder[i]) {
|
---|
146 | case 'y':
|
---|
147 | case 'm':
|
---|
148 | case 'd':
|
---|
149 | case 'h':
|
---|
150 | $('<div>').append(w._makeEl(inBase, {'attr': {'field':w.fldOrder[i], 'amount':1}})).addClass('ui-block-'+tmp).appendTo(divIn);
|
---|
151 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':1}}).addClass('ui-block-'+tmp).buttonMarkup(butPTheme).appendTo(divPlus);
|
---|
152 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':1}}).addClass('ui-block-'+tmp).buttonMarkup(butMTheme).appendTo(divMinus);
|
---|
153 | cnt++;
|
---|
154 | break;
|
---|
155 | case 'a':
|
---|
156 | if ( w.__('timeFormat') === 12 ) {
|
---|
157 | $('<div>').append(w._makeEl(inBaseT, {'attr': {'field':w.fldOrder[i], 'amount':1}})).addClass('ui-block-'+tmp).appendTo(divIn);
|
---|
158 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':1}}).addClass('ui-block-'+tmp).buttonMarkup(butPTheme).appendTo(divPlus);
|
---|
159 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':1}}).addClass('ui-block-'+tmp).buttonMarkup(butMTheme).appendTo(divMinus);
|
---|
160 | cnt++;
|
---|
161 | }
|
---|
162 | break;
|
---|
163 | case 'M':
|
---|
164 | $('<div>').append(w._makeEl(inBaseT, {'attr': {'field':w.fldOrder[i], 'amount':1}})).addClass('ui-block-'+tmp).appendTo(divIn);
|
---|
165 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':1}}).addClass('ui-block-'+tmp).buttonMarkup(butPTheme).appendTo(divPlus);
|
---|
166 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':1}}).addClass('ui-block-'+tmp).buttonMarkup(butMTheme).appendTo(divMinus);
|
---|
167 | cnt++;
|
---|
168 | break;
|
---|
169 | case 'i':
|
---|
170 | $('<div>').append(w._makeEl(inBase, {'attr': {'field':w.fldOrder[i], 'amount':o.minuteStep}})).addClass('ui-block-'+tmp).appendTo(divIn);
|
---|
171 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':o.minuteStep}}).addClass('ui-block-'+tmp).buttonMarkup(butPTheme).appendTo(divPlus);
|
---|
172 | w._makeEl(butBase, {'attr': {'field':w.fldOrder[i], 'amount':o.minuteStep}}).addClass('ui-block-'+tmp).buttonMarkup(butMTheme).appendTo(divMinus);
|
---|
173 | cnt++;
|
---|
174 | break;
|
---|
175 | }
|
---|
176 | }
|
---|
177 |
|
---|
178 | divPlus.addClass('ui-grid-'+['a','b','c','d','e'][cnt]).appendTo(w.d.intHTML);
|
---|
179 | divIn.addClass('ui-datebox-dboxin').addClass('ui-grid-'+['a','b','c','d','e'][cnt]).appendTo(w.d.intHTML);
|
---|
180 | divMinus.addClass('ui-grid-'+['a','b','c','d','e'][cnt]).appendTo(w.d.intHTML);
|
---|
181 |
|
---|
182 | if ( o.mobVer >= 140 ) {
|
---|
183 | divMinus.find('div').css({'min-height':'2.3em'});
|
---|
184 | divPlus.find('div').css({'min-height':'2.3em'});
|
---|
185 | }
|
---|
186 |
|
---|
187 | divIn.find('input').each(function () {
|
---|
188 | switch ( $(this).jqmData('field') ) {
|
---|
189 | case 'y':
|
---|
190 | $(this).val(w.theDate.getFullYear()); break;
|
---|
191 | case 'm':
|
---|
192 | $(this).val(w.theDate.getMonth() + 1); break;
|
---|
193 | case 'd':
|
---|
194 | $(this).val(w.theDate.getDate()); break;
|
---|
195 | case 'h':
|
---|
196 | if ( w.__('timeFormat') === 12 ) {
|
---|
197 | if ( w.theDate.getHours() > 12 ) {
|
---|
198 | $(this).val(w.theDate.getHours()-12); break;
|
---|
199 | } else if ( w.theDate.getHours() === 0 ) {
|
---|
200 | $(this).val(12); break;
|
---|
201 | }
|
---|
202 | }
|
---|
203 | $(this).val(w.theDate.getHours()); break;
|
---|
204 | case 'i':
|
---|
205 | $(this).val(w._zPad(w.theDate.getMinutes())); break;
|
---|
206 | case 'M':
|
---|
207 | $(this).val(w.__('monthsOfYearShort')[w.theDate.getMonth()]); break;
|
---|
208 | case 'a':
|
---|
209 | $(this).val((w.theDate.getHours() > 11)?w.__('meridiem')[1]:w.__('meridiem')[0]);
|
---|
210 | break;
|
---|
211 | }
|
---|
212 | });
|
---|
213 |
|
---|
214 | w.d.divIn = divIn;
|
---|
215 |
|
---|
216 | if ( w.dateOK !== true ) {
|
---|
217 | divIn.find('input').addClass(uid+'griddate-disable');
|
---|
218 | } else {
|
---|
219 | divIn.find('.'+uid+'griddate-disable').removeClass(uid+'griddate-disable');
|
---|
220 | }
|
---|
221 |
|
---|
222 | if ( o.useSetButton || o.useClearButton ) {
|
---|
223 | y = $('<div>', {'class':uid+'controls'});
|
---|
224 |
|
---|
225 | if ( o.useSetButton ) {
|
---|
226 | $('<a href="#">'+((o.mode==='datebox')?w.__('setDateButtonLabel'):w.__('setTimeButtonLabel'))+'</a>')
|
---|
227 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'check', iconpos: 'left', corners:true, shadow:true})
|
---|
228 | .on(o.clickEventAlt, function(e) {
|
---|
229 | e.preventDefault();
|
---|
230 | if ( w.dateOK === true ) {
|
---|
231 | w.d.input.trigger('datebox', {'method':'set', 'value':w._formatter(w.__fmt(),w.theDate), 'date':w.theDate});
|
---|
232 | w.d.input.trigger('datebox', {'method':'close'});
|
---|
233 | }
|
---|
234 | });
|
---|
235 | }
|
---|
236 | if ( o.useClearButton ) {
|
---|
237 | $('<a href="#">'+w.__('clearButton')+'</a>')
|
---|
238 | .appendTo(y).buttonMarkup({theme: o.theme, icon: 'delete', iconpos: 'left', corners:true, shadow:true})
|
---|
239 | .on(o.clickEventAlt, function(e) {
|
---|
240 | e.preventDefault();
|
---|
241 | w.d.input.val('');
|
---|
242 | w.d.input.trigger('datebox',{'method':'clear'});
|
---|
243 | w.d.input.trigger('datebox',{'method':'close'});
|
---|
244 | });
|
---|
245 | }
|
---|
246 | if ( o.useCollapsedBut ) {
|
---|
247 | y.addClass('ui-datebox-collapse');
|
---|
248 | }
|
---|
249 | y.appendTo(w.d.intHTML);
|
---|
250 | }
|
---|
251 |
|
---|
252 | if ( o.repButton === false ) {
|
---|
253 | divPlus.on(o.clickEvent, 'div', function(e) {
|
---|
254 | e.preventDefault();
|
---|
255 | w._dbox_delta = 1;
|
---|
256 | w._offset($(this).jqmData('field'), $(this).jqmData('amount'));
|
---|
257 | });
|
---|
258 | divMinus.on(o.clickEvent, 'div', function(e) {
|
---|
259 | e.preventDefault();
|
---|
260 | w._dbox_delta = -1;
|
---|
261 | w._offset($(this).jqmData('field'), $(this).jqmData('amount')*-1);
|
---|
262 | });
|
---|
263 | }
|
---|
264 |
|
---|
265 | divIn.on('change', 'input', function() { w._dbox_enter($(this)); });
|
---|
266 |
|
---|
267 | if ( w.wheelExists ) { // Mousewheel operation, if plugin is loaded
|
---|
268 | divIn.on('mousewheel', 'input', function(e,d) {
|
---|
269 | e.preventDefault();
|
---|
270 | w._dbox_delta = d<0?-1:1;
|
---|
271 | w._offset($(this).jqmData('field'), ((d<0)?-1:1)*$(this).jqmData('amount'));
|
---|
272 | });
|
---|
273 | }
|
---|
274 |
|
---|
275 | if ( o.repButton === true ) {
|
---|
276 | divPlus.on(w.drag.eStart, 'div', function(e) {
|
---|
277 | tmp = [$(this).jqmData('field'), $(this).jqmData('amount')];
|
---|
278 | w.drag.move = true;
|
---|
279 | w._dbox_delta = 1;
|
---|
280 | w._offset(tmp[0], tmp[1], false);
|
---|
281 | w._dbox_run_update();
|
---|
282 | if ( !w.runButton ) {
|
---|
283 | w.drag.target = tmp;
|
---|
284 | w.runButton = setTimeout(function() {w._dbox_run();}, 500);
|
---|
285 | }
|
---|
286 | });
|
---|
287 |
|
---|
288 | divMinus.on(w.drag.eStart, 'div', function(e) {
|
---|
289 | tmp = [$(this).jqmData('field'), $(this).jqmData('amount')*-1];
|
---|
290 | w.drag.move = true;
|
---|
291 | w._dbox_delta = -1;
|
---|
292 | w._offset(tmp[0], tmp[1], false);
|
---|
293 | w._dbox_run_update();
|
---|
294 | if ( !w.runButton ) {
|
---|
295 | w.drag.target = tmp;
|
---|
296 | w.runButton = setTimeout(function() {w._dbox_run();}, 500);
|
---|
297 | }
|
---|
298 | });
|
---|
299 |
|
---|
300 | divPlus.on(g.eEndA, function(e) {
|
---|
301 | if ( g.move ) {
|
---|
302 | e.preventDefault();
|
---|
303 | clearTimeout(w.runButton);
|
---|
304 | w.runButton = false;
|
---|
305 | g.move = false;
|
---|
306 | }
|
---|
307 | });
|
---|
308 | divMinus.on(g.eEndA, function(e) {
|
---|
309 | if ( g.move ) {
|
---|
310 | e.preventDefault();
|
---|
311 | clearTimeout(w.runButton);
|
---|
312 | w.runButton = false;
|
---|
313 | g.move = false;
|
---|
314 | }
|
---|
315 | });
|
---|
316 | }
|
---|
317 | }
|
---|
318 | });
|
---|
319 | })( jQuery );
|
---|