| 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 );
|
|---|
![(please configure the [header_logo] section in trac.ini)](/trac_user/contrib/chrome/site/your_project_logo.png){kind=logo}
