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
Line 
1(function($) {
2jQuery.timepicker.log = jQuery.noop; // that's ugly, but the timepicker is acting weird and throws parsing errors
3
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
49jQuery.fn.pwgDatepicker = function(settings) {
50  var options = jQuery.extend(true, {
51    showTimepicker: false,
52    cancelButton: false,
53  }, settings || {});
54
55  return this.each(function() {
56    var $this = jQuery(this),
57        originalValue = $this.val(),
58        originalDate,
59        $target = jQuery('[name="'+ $this.data('datepicker') +'"]'),
60        linked = !!$target.length,
61        $start, $end;
62
63    if (linked) {
64      originalValue = $target.val();
65    }
66
67    // custom setter
68    function set(date, init) {
69      if (date === '') date = null;
70      $this.datetimepicker('setDate', date);
71
72      if ($this.data('datepicker-start') && $start) {
73        $start.datetimepicker('option', 'maxDate', date);
74      }
75      else if ($this.data('datepicker-end') && $end) {
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        }
79      }
80
81      if (!date && linked) {
82        $target.val('');
83      }
84    }
85
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');
92
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
106    // init picker
107    $this.datetimepicker(jQuery.extend({
108      dateFormat: linked ? 'DD d MM yy' : 'yy-mm-dd',
109      timeFormat: 'HH:mm',
110
111      altField: linked ? $target : null,
112      altFormat: 'yy-mm-dd',
113      altTimeFormat: options.showTimepicker ? 'HH:mm:ss' : '',
114
115      autoSize: true,
116      changeMonth : true,
117      changeYear: true,
118      altFieldTimeOnly: false,
119      showSecond: false,
120      alwaysSetTime: false
121    }, options));
122
123    // attach range pickers
124    if ($this.data('datepicker-start')) {
125      $start = jQuery('[data-datepicker="'+ $this.data('datepicker-start') +'"]');
126
127      $this.datetimepicker('option', 'onClose', function(date) {
128        $start.datetimepicker('option', 'maxDate', date);
129      });
130
131      $this.datetimepicker('option', 'minDate', $start.datetimepicker('getDate'));
132    }
133    else if ($this.data('datepicker-end')) {
134      $end = jQuery('[data-datepicker="'+ $this.data('datepicker-end') +'"]');
135
136      $this.datetimepicker('option', 'onClose', function(date) {
137        $end.datetimepicker('option', 'minDate', date);
138      });
139    }
140
141    // attach unset button
142    if ($this.data('datepicker-unset')) {
143      jQuery('#'+ $this.data('datepicker-unset')).on('click', function(e) {
144        e.preventDefault();
145        set(null, false);
146      });
147    }
148
149    // set value from linked input
150    if (linked) {
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);
154      }
155      else if (splitted[0].length == 10) {
156        set(jQuery.datepicker.parseDate('yy-mm-dd', splitted[0]), true);
157      }
158      else {
159        set(null, true);
160      }
161    }
162
163    originalDate = $this.datetimepicker('getDate');
164
165    // autoSize not handled by timepicker
166    if (options.showTimepicker) {
167      $this.attr('size', parseInt($this.attr('size'))+6);
168    }
169  });
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.