feature:3168 Unuseable datepicker for old dates

modify DatePicker internal methods to replace year select by a numeric input

git-svn-id: http://piwigo.org/svn/trunk@30341 68402e56-0260-453c-a942-63ccdbb3a9ee

admin/themes/default/js/datepicker.js

@@ -1,5 +1,51 @@
+(function($) {
 jQuery.timepicker.log = jQuery.noop; // that's ugly, but the timepicker is acting weird and throws parsing errors
 
+
+// modify DatePicker internal methods to replace year select by a numeric input
+var origGenerateMonthYearHeader = $.datepicker._generateMonthYearHeader,
+    origSelectMonthYear = $.datepicker._selectMonthYear;
+
+$.datepicker._generateMonthYearHeader = function(inst, drawMonth, drawYear, minDate, maxDate,
+      secondary, monthNames, monthNamesShort) {
+
+  var html = origGenerateMonthYearHeader.call(this, inst, drawMonth, drawYear, minDate, maxDate,
+      secondary, monthNames, monthNamesShort);
+
+  var yearshtml = "<input type='number' class='ui-datepicker-year' data-handler='selectYear' data-event='change keyup' value='"+drawYear+"' style='width:4em;margin-left:2px;'>";
+
+  return html.replace(new RegExp('<select class=\'ui-datepicker-year\'.*</select>', 'gm'), yearshtml);
+};
+
+$.datepicker._selectMonthYear = debounce(function(id, select, period) {
+  if (period === 'M') {
+    origSelectMonthYear.call(this, id, select, period);
+  }
+  else {
+    var target = $(id),
+      inst = this._getInst(target[0]),
+      val = parseInt(select.value, 10);
+
+    if (isNaN(val)) {
+      inst['drawYear'] = '';
+    }
+    else {
+      var pos = getCursor($('.ui-datepicker-year')[0]);
+
+      inst['selectedYear'] = inst['drawYear'] = val;
+
+      this._notifyChange(inst);
+      this._adjustDate(target);
+
+      $('.ui-datepicker-year').focus();
+
+      setCursor($('.ui-datepicker-year')[0], pos);
+    }
+  }
+}, 500);
+
+
+// plugin definition
 jQuery.fn.pwgDatepicker = function(settings) {
   var options = jQuery.extend(true, {
     showTimepicker: false,
@@ -13,7 +59,7 @@ jQuery.fn.pwgDatepicker = function(settings) {
         $target = jQuery('[name="'+ $this.data('datepicker') +'"]'),
         linked = !!$target.length,
         $start, $end;
-    
+
     if (linked) {
       originalValue = $target.val();
     }
@@ -22,7 +68,7 @@ jQuery.fn.pwgDatepicker = function(settings) {
     function set(date, init) {
       if (date === '') date = null;
       $this.datetimepicker('setDate', date);
-      
+
       if ($this.data('datepicker-start') && $start) {
         $start.datetimepicker('option', 'maxDate', date);
       }
@@ -31,7 +77,7 @@ jQuery.fn.pwgDatepicker = function(settings) {
           $end.datetimepicker('option', 'minDate', date);
         }
       }
-      
+
       if (!date && linked) {
         $target.val('');
       }
@@ -43,7 +89,7 @@ jQuery.fn.pwgDatepicker = function(settings) {
         setTimeout(function() {
           var buttonPane = $this.datepicker('widget')
               .find('.ui-datepicker-buttonpane');
-          
+
           if (buttonPane.find('.pwg-datepicker-cancel').length == 0) {
             $('<button type="button">'+ options.cancelButton +'</button>')
               .on('click', function() {
@@ -61,38 +107,37 @@ jQuery.fn.pwgDatepicker = function(settings) {
     $this.datetimepicker(jQuery.extend({
       dateFormat: linked ? 'DD d MM yy' : 'yy-mm-dd',
       timeFormat: 'HH:mm',
-      
+
       altField: linked ? $target : null,
       altFormat: 'yy-mm-dd',
       altTimeFormat: options.showTimepicker ? 'HH:mm:ss' : '',
-      
+
       autoSize: true,
       changeMonth : true,
       changeYear: true,
-      yearRange: 'c-80:c+20',
       altFieldTimeOnly: false,
       showSecond: false,
       alwaysSetTime: false
     }, options));
-    
+
     // attach range pickers
     if ($this.data('datepicker-start')) {
       $start = jQuery('[data-datepicker="'+ $this.data('datepicker-start') +'"]');
-      
+
       $this.datetimepicker('option', 'onClose', function(date) {
         $start.datetimepicker('option', 'maxDate', date);
       });
-      
+
       $this.datetimepicker('option', 'minDate', $start.datetimepicker('getDate'));
     }
     else if ($this.data('datepicker-end')) {
       $end = jQuery('[data-datepicker="'+ $this.data('datepicker-end') +'"]');
-      
+
       $this.datetimepicker('option', 'onClose', function(date) {
         $end.datetimepicker('option', 'minDate', date);
       });
     }
-    
+
     // attach unset button
     if ($this.data('datepicker-unset')) {
       jQuery('#'+ $this.data('datepicker-unset')).on('click', function(e) {
@@ -100,7 +145,7 @@ jQuery.fn.pwgDatepicker = function(settings) {
         set(null, false);
       });
     }
-    
+
     // set value from linked input
     if (linked) {
       var splitted = originalValue.split(' ');
@@ -114,12 +159,69 @@ jQuery.fn.pwgDatepicker = function(settings) {
         set(null, true);
       }
     }
-    
+
     originalDate = $this.datetimepicker('getDate');
-    
+
     // autoSize not handled by timepicker
     if (options.showTimepicker) {
       $this.attr('size', parseInt($this.attr('size'))+6);
     }
   });
-};
+};
+
+
+// functions for custom year input
+function setCursor(node,pos){
+  var node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;
+
+  if (!node) {
+    return false;
+  }
+  else if(node.createTextRange) {
+    var textRange = node.createTextRange();
+    textRange.collapse(true);
+    textRange.moveEnd(pos);
+    textRange.moveStart(pos);
+    textRange.select();
+    return true;
+  }
+  else if(node.setSelectionRange) {
+    node.setSelectionRange(pos,pos);
+    return true;
+  }
+
+  return false;
+}
+
+function getCursor(input) {
+    // Internet Explorer Caret Position (TextArea)
+    if (document.selection && document.selection.createRange) {
+      var range = document.selection.createRange();
+      var bookmark = range.getBookmark();
+      return bookmark.charCodeAt(2) - 2;
+    }
+    else {
+      // Firefox Caret Position (TextArea)
+      if (input.setSelectionRange)
+       return input.selectionStart;
+    }
+
+    return 0;
+}
+
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+
+}(jQuery));