source: trunk/admin/themes/default/js/datepicker.js @ 30341

Last change on this file since 30341 was 30341, checked in by mistic100, 9 years ago

feature:3168 Unuseable datepicker for old dates
modify DatePicker internal methods to replace year select by a numeric input

File size: 6.5 KB
RevLine 
[30341]1(function($) {
[28500]2jQuery.timepicker.log = jQuery.noop; // that's ugly, but the timepicker is acting weird and throws parsing errors
3
[30341]4
5// modify DatePicker internal methods to replace year select by a numeric input
6var origGenerateMonthYearHeader = $.datepicker._generateMonthYearHeader,
7    origSelectMonthYear = $.datepicker._selectMonthYear;
8
9$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
10      secondary, monthNames, monthNamesShort) {
11
12  var html = origGenerateMonthYearHeader.call(this, inst, drawMonth, drawYear, minDate, maxDate,
13      secondary, monthNames, monthNamesShort);
14
15  var yearshtml = "<input type='number' class='ui-datepicker-year' data-handler='selectYear' data-event='change keyup' value='"+drawYear+"' style='width:4em;margin-left:2px;'>";
16
17  return html.replace(new RegExp('<select class=\'ui-datepicker-year\'.*</select>', 'gm'), yearshtml);
18};
19
20$.datepicker._selectMonthYear = debounce(function(id, select, period) {
21  if (period === 'M') {
22    origSelectMonthYear.call(this, id, select, period);
23  }
24  else {
25    var target = $(id),
26      inst = this._getInst(target[0]),
27      val = parseInt(select.value, 10);
28
29    if (isNaN(val)) {
30      inst['drawYear'] = '';
31    }
32    else {
33      var pos = getCursor($('.ui-datepicker-year')[0]);
34
35      inst['selectedYear'] = inst['drawYear'] = val;
36
37      this._notifyChange(inst);
38      this._adjustDate(target);
39
40      $('.ui-datepicker-year').focus();
41
42      setCursor($('.ui-datepicker-year')[0], pos);
43    }
44  }
45}, 500);
46
47
48// plugin definition
[28765]49jQuery.fn.pwgDatepicker = function(settings) {
50  var options = jQuery.extend(true, {
51    showTimepicker: false,
52    cancelButton: false,
53  }, settings || {});
54
[28497]55  return this.each(function() {
56    var $this = jQuery(this),
[28765]57        originalValue = $this.val(),
58        originalDate,
59        $target = jQuery('[name="'+ $this.data('datepicker') +'"]'),
60        linked = !!$target.length,
61        $start, $end;
[30341]62
[28765]63    if (linked) {
64      originalValue = $target.val();
[28500]65    }
66
67    // custom setter
68    function set(date, init) {
[28765]69      if (date === '') date = null;
[28500]70      $this.datetimepicker('setDate', date);
[30341]71
[28765]72      if ($this.data('datepicker-start') && $start) {
[28500]73        $start.datetimepicker('option', 'maxDate', date);
[28497]74      }
[28765]75      else if ($this.data('datepicker-end') && $end) {
[28500]76        if (!init) { // on init, "end" is not initialized yet (assuming "start" is before "end" in the DOM)
77          $end.datetimepicker('option', 'minDate', date);
78        }
[28497]79      }
[30341]80
[28500]81      if (!date && linked) {
82        $target.val('');
83      }
[28497]84    }
85
[28765]86    // and custom cancel button
87    if (options.cancelButton) {
88      options.beforeShow = options.onChangeMonthYear = function() {
89        setTimeout(function() {
90          var buttonPane = $this.datepicker('widget')
91              .find('.ui-datepicker-buttonpane');
[30341]92
[28765]93          if (buttonPane.find('.pwg-datepicker-cancel').length == 0) {
94            $('<button type="button">'+ options.cancelButton +'</button>')
95              .on('click', function() {
96                set(originalDate, false);
97                $this.datepicker('hide').blur();
98              })
99              .addClass('pwg-datepicker-cancel ui-state-error ui-corner-all')
100              .appendTo(buttonPane);
101          }
102        }, 1);
103      };
104    }
105
[28497]106    // init picker
[28500]107    $this.datetimepicker(jQuery.extend({
108      dateFormat: linked ? 'DD d MM yy' : 'yy-mm-dd',
109      timeFormat: 'HH:mm',
[30341]110
[28500]111      altField: linked ? $target : null,
[28497]112      altFormat: 'yy-mm-dd',
[28500]113      altTimeFormat: options.showTimepicker ? 'HH:mm:ss' : '',
[30341]114
[28497]115      autoSize: true,
116      changeMonth : true,
[28500]117      changeYear: true,
118      altFieldTimeOnly: false,
119      showSecond: false,
[28765]120      alwaysSetTime: false
[28497]121    }, options));
[30341]122
[28500]123    // attach range pickers
[28497]124    if ($this.data('datepicker-start')) {
[28765]125      $start = jQuery('[data-datepicker="'+ $this.data('datepicker-start') +'"]');
[30341]126
[28500]127      $this.datetimepicker('option', 'onClose', function(date) {
128        $start.datetimepicker('option', 'maxDate', date);
[28497]129      });
[30341]130
[28500]131      $this.datetimepicker('option', 'minDate', $start.datetimepicker('getDate'));
[28497]132    }
133    else if ($this.data('datepicker-end')) {
[28765]134      $end = jQuery('[data-datepicker="'+ $this.data('datepicker-end') +'"]');
[30341]135
[28500]136      $this.datetimepicker('option', 'onClose', function(date) {
137        $end.datetimepicker('option', 'minDate', date);
[28497]138      });
139    }
[30341]140
[28497]141    // attach unset button
142    if ($this.data('datepicker-unset')) {
143      jQuery('#'+ $this.data('datepicker-unset')).on('click', function(e) {
144        e.preventDefault();
[28500]145        set(null, false);
[28497]146      });
147    }
[30341]148
[28497]149    // set value from linked input
[28500]150    if (linked) {
[28765]151      var splitted = originalValue.split(' ');
152      if (splitted.length == 2 && options.showTimepicker) {
153        set(jQuery.datepicker.parseDateTime('yy-mm-dd', 'HH:mm:ss', originalValue), true);
[28500]154      }
[28765]155      else if (splitted[0].length == 10) {
156        set(jQuery.datepicker.parseDate('yy-mm-dd', splitted[0]), true);
[28500]157      }
158      else {
159        set(null, true);
160      }
[28497]161    }
[30341]162
[28765]163    originalDate = $this.datetimepicker('getDate');
[30341]164
[28500]165    // autoSize not handled by timepicker
166    if (options.showTimepicker) {
167      $this.attr('size', parseInt($this.attr('size'))+6);
168    }
[28497]169  });
[30341]170};
171
172
173// functions for custom year input
174function setCursor(node,pos){
175  var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;
176
177  if (!node) {
178    return false;
179  }
180  else if(node.createTextRange) {
181    var textRange = node.createTextRange();
182    textRange.collapse(true);
183    textRange.moveEnd(pos);
184    textRange.moveStart(pos);
185    textRange.select();
186    return true;
187  }
188  else if(node.setSelectionRange) {
189    node.setSelectionRange(pos,pos);
190    return true;
191  }
192
193  return false;
194}
195
196function getCursor(input) {
197    // Internet Explorer Caret Position (TextArea)
198    if (document.selection && document.selection.createRange) {
199      var range = document.selection.createRange();
200      var bookmark = range.getBookmark();
201      return bookmark.charCodeAt(2) - 2;
202    }
203    else {
204      // Firefox Caret Position (TextArea)
205      if (input.setSelectionRange)
206       return input.selectionStart;
207    }
208
209    return 0;
210}
211
212function debounce(func, wait, immediate) {
213  var timeout;
214  return function() {
215    var context = this, args = arguments;
216    var later = function() {
217      timeout = null;
218      if (!immediate) func.apply(context, args);
219    };
220    var callNow = immediate && !timeout;
221    clearTimeout(timeout);
222    timeout = setTimeout(later, wait);
223    if (callNow) func.apply(context, args);
224  };
225}
226
227}(jQuery));
Note: See TracBrowser for help on using the repository browser.