2010-10-01 3 views
5

In jQuery DatePicker gibt es eine nervige Sache, wenn Sie es als Kalender verwenden und vom ausgewählten Datum abhängen. Während der Navigation von Monat zu Monat wird der ausgewählte Tag für alle Monate aktiviert. Ich weiß, dass dieses Problem seit mehr als 6 Monaten besteht und ich habe es dem jQuery Team gemeldet. Wie auch immer, ich würde gerne wissen, gibt es irgendwelche Problemumgehungen oder wie man dieses Verhalten deaktiviert?jQuery DatePicker So deaktivieren Sie die automatische Tagauswahl beim Durchsuchen des Kalenders?

Kalender Beispiel kann here

Antwort

8

Hier ist ein Workaround, den ich herausgefunden habe.

$(function() { 

    $("#datepicker").datepicker({ 
     onChangeMonthYear: function(year, month, inst) { 
      var bMonth = (new Date(this.value)).getMonth() != month - 1; 
      var bYear = (new Date(this.value)).getFullYear() != year; 
      if (bMonth || bYear) { 
      setTimeout(function() { 
       $('.ui-state-active').removeClass('ui-state-active'); 
      }, 5); 
      } 
     } 
    }); 
});​ 

crazy demo

+1

Sie können sehen, dass der Tag beim Umschalten abgewählt wird – Natrium

2

dieses Skript Fügen Sie nach finden Sie jQuery UI enthalten haben. Sie können es inline einfügen oder in eine eigene Datei einfügen. bearbeiten: Dieser Hack behebt Ihr Problem für Version 1.8.5 von jQuery UI. Ich habe eine Reihe von Anwendungsfällen in FF 3.6.10 und IE 8 getestet. Es ist durchaus möglich, dass dieser Hack nicht unter allen möglichen Umständen funktioniert. Wenn ich etwas bemerke, werde ich wahrscheinlich versuchen, sie zu beheben, aber für den Moment ist es so wie es ist. Ich habe eine demo zusammengeworfen. Zeigt an, dass es auch mit jQuery 1.8.4 funktioniert. Nur um klar zu sein ... meine Lösung ist keine schnelle und dreckige Abhilfe, es ist eine tatsächliche Korrektur des Fehlers im Datepicker-Code. Es ist so lang, weil es eine ursprüngliche Methode überschreibt (und somit den ursprünglichen Code in seiner Gesamtheit enthält). Das Update selbst ist eine Änderung in nur einer Zeile. Aber ich habe das Update als ein Skript zur Verfügung gestellt, das einfach hinzugefügt werden kann, ohne den ursprünglichen Code überhaupt bearbeiten zu müssen.

$.extend(
    $.datepicker, 
    { 
     _generateHTML: 
      function(inst) { 
       if (!inst.dpuuid) 
       { 
        for(attr in window) 
        { 
         if(/^DP_jQuery_/.test(attr)) 
         { 
          inst.dpuuid = attr.replace(/^DP_jQuery_([0-9]+)/, '$1'); 
         } 
        } 
       } 
       var dpuuid = inst.dpuuid; 
       var today = new Date(); 
       today = this._daylightSavingAdjust(
        new Date(today.getFullYear(), today.getMonth(), today.getDate())); // clear time 
       var isRTL = this._get(inst, 'isRTL'); 
       var showButtonPanel = this._get(inst, 'showButtonPanel'); 
       var hideIfNoPrevNext = this._get(inst, 'hideIfNoPrevNext'); 
       var navigationAsDateFormat = this._get(inst, 'navigationAsDateFormat'); 
       var numMonths = this._getNumberOfMonths(inst); 
       var showCurrentAtPos = this._get(inst, 'showCurrentAtPos'); 
       var stepMonths = this._get(inst, 'stepMonths'); 
       var isMultiMonth = (numMonths[0] != 1 || numMonths[1] != 1); 
       var currentDate = this._daylightSavingAdjust((!inst.currentDay ? new Date(9999, 9, 9) : 
        new Date(inst.currentYear, inst.currentMonth, inst.currentDay))); 
       var minDate = this._getMinMaxDate(inst, 'min'); 
       var maxDate = this._getMinMaxDate(inst, 'max'); 
       var drawMonth = inst.drawMonth - showCurrentAtPos; 
       var drawYear = inst.drawYear; 
       if (drawMonth < 0) { 
        drawMonth += 12; 
        drawYear--; 
       } 
       if (maxDate) { 
        var maxDraw = this._daylightSavingAdjust(new Date(maxDate.getFullYear(), 
         maxDate.getMonth() - (numMonths[0] * numMonths[1]) + 1, maxDate.getDate())); 
        maxDraw = (minDate && maxDraw < minDate ? minDate : maxDraw); 
        while (this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1)) > maxDraw) { 
         drawMonth--; 
         if (drawMonth < 0) { 
          drawMonth = 11; 
          drawYear--; 
         } 
        } 
       } 
       inst.drawMonth = drawMonth; 
       inst.drawYear = drawYear; 
       var prevText = this._get(inst, 'prevText'); 
       prevText = (!navigationAsDateFormat ? prevText : this.formatDate(prevText, 
        this._daylightSavingAdjust(new Date(drawYear, drawMonth - stepMonths, 1)), 
        this._getFormatConfig(inst))); 
       var prev = (this._canAdjustMonth(inst, -1, drawYear, drawMonth) ? 
        '<a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
        '.datepicker._adjustDate(\'#' + inst.id + '\', -' + stepMonths + ', \'M\');"' + 
        ' title="' + prevText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>' : 
        (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="'+ prevText +'"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'e' : 'w') + '">' + prevText + '</span></a>')); 
       var nextText = this._get(inst, 'nextText'); 
       nextText = (!navigationAsDateFormat ? nextText : this.formatDate(nextText, 
        this._daylightSavingAdjust(new Date(drawYear, drawMonth + stepMonths, 1)), 
        this._getFormatConfig(inst))); 
       var next = (this._canAdjustMonth(inst, +1, drawYear, drawMonth) ? 
        '<a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
        '.datepicker._adjustDate(\'#' + inst.id + '\', +' + stepMonths + ', \'M\');"' + 
        ' title="' + nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>' : 
        (hideIfNoPrevNext ? '' : '<a class="ui-datepicker-next ui-corner-all ui-state-disabled" title="'+ nextText + '"><span class="ui-icon ui-icon-circle-triangle-' + (isRTL ? 'w' : 'e') + '">' + nextText + '</span></a>')); 
       var currentText = this._get(inst, 'currentText'); 
       var gotoDate = (this._get(inst, 'gotoCurrent') && inst.currentDay ? currentDate : today); 
       currentText = (!navigationAsDateFormat ? currentText : 
        this.formatDate(currentText, gotoDate, this._getFormatConfig(inst))); 
       var controls = (!inst.inline ? '<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
        '.datepicker._hideDatepicker();">' + this._get(inst, 'closeText') + '</button>' : ''); 
       var buttonPanel = (showButtonPanel) ? '<div class="ui-datepicker-buttonpane ui-widget-content">' + (isRTL ? controls : '') + 
        (this._isInRange(inst, gotoDate) ? '<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" onclick="DP_jQuery_' + dpuuid + 
        '.datepicker._gotoToday(\'#' + inst.id + '\');"' + 
        '>' + currentText + '</button>' : '') + (isRTL ? '' : controls) + '</div>' : ''; 
       var firstDay = parseInt(this._get(inst, 'firstDay'),10); 
       firstDay = (isNaN(firstDay) ? 0 : firstDay); 
       var showWeek = this._get(inst, 'showWeek'); 
       var dayNames = this._get(inst, 'dayNames'); 
       var dayNamesShort = this._get(inst, 'dayNamesShort'); 
       var dayNamesMin = this._get(inst, 'dayNamesMin'); 
       var monthNames = this._get(inst, 'monthNames'); 
       var monthNamesShort = this._get(inst, 'monthNamesShort'); 
       var beforeShowDay = this._get(inst, 'beforeShowDay'); 
       var showOtherMonths = this._get(inst, 'showOtherMonths'); 
       var selectOtherMonths = this._get(inst, 'selectOtherMonths'); 
       var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week; 
       var defaultDate = this._getDefaultDate(inst); 
       var html = ''; 
       for (var row = 0; row < numMonths[0]; row++) { 
        var group = ''; 
        for (var col = 0; col < numMonths[1]; col++) { 
         var selectedDate = this._daylightSavingAdjust(new Date(inst.currentYear, inst.currentMonth, inst.selectedDay)); 
         var cornerClass = ' ui-corner-all'; 
         var calender = ''; 
         if (isMultiMonth) { 
          calender += '<div class="ui-datepicker-group'; 
          if (numMonths[1] > 1) 
           switch (col) { 
            case 0: calender += ' ui-datepicker-group-first'; 
             cornerClass = ' ui-corner-' + (isRTL ? 'right' : 'left'); break; 
            case numMonths[1]-1: calender += ' ui-datepicker-group-last'; 
             cornerClass = ' ui-corner-' + (isRTL ? 'left' : 'right'); break; 
            default: calender += ' ui-datepicker-group-middle'; cornerClass = ''; break; 
           } 
          calender += '">'; 
         } 
         calender += '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix' + cornerClass + '">' + 
          (/all|left/.test(cornerClass) && row == 0 ? (isRTL ? next : prev) : '') + 
          (/all|right/.test(cornerClass) && row == 0 ? (isRTL ? prev : next) : '') + 
          this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate, 
          row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers 
          '</div><table class="ui-datepicker-calendar"><thead>' + 
          '<tr>'; 
         var thead = (showWeek ? '<th class="ui-datepicker-week-col">' + this._get(inst, 'weekHeader') + '</th>' : ''); 
         for (var dow = 0; dow < 7; dow++) { // days of the week 
          var day = (dow + firstDay) % 7; 
          thead += '<th' + ((dow + firstDay + 6) % 7 >= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' + 
           '<span title="' + dayNames[day] + '">' + dayNamesMin[day] + '</span></th>'; 
         } 
         calender += thead + '</tr></thead><tbody>'; 
         var daysInMonth = this._getDaysInMonth(drawYear, drawMonth); 
         if (drawYear == inst.selectedYear && drawMonth == inst.selectedMonth) 
          inst.selectedDay = Math.min(inst.selectedDay, daysInMonth); 
         var leadDays = (this._getFirstDayOfMonth(drawYear, drawMonth) - firstDay + 7) % 7; 
         var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth)/7)); // calculate the number of rows to generate 
         var printDate = this._daylightSavingAdjust(new Date(drawYear, drawMonth, 1 - leadDays)); 
         for (var dRow = 0; dRow < numRows; dRow++) { // create date picker rows 
          calender += '<tr>'; 
          var tbody = (!showWeek ? '' : '<td class="ui-datepicker-week-col">' + 
           this._get(inst, 'calculateWeek')(printDate) + '</td>'); 
          for (var dow = 0; dow < 7; dow++) { // create date picker days 
           var daySettings = (beforeShowDay ? 
            beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, '']); 
           var otherMonth = (printDate.getMonth() != drawMonth); 
           var unselectable = (otherMonth && !selectOtherMonths) || !daySettings[0] || 
            (minDate && printDate < minDate) || (maxDate && printDate > maxDate); 
           tbody += '<td class="' + 
            ((dow + firstDay + 6) % 7 >= 5 ? ' ui-datepicker-week-end' : '') + // highlight weekends 
            (otherMonth ? ' ui-datepicker-other-month' : '') + // highlight days from other months 
            ((printDate.getTime() == selectedDate.getTime() && drawMonth == inst.selectedMonth && inst._keyEvent) || // user pressed key 
            (defaultDate.getTime() == printDate.getTime() && defaultDate.getTime() == selectedDate.getTime()) ? 
            // or defaultDate is current printedDate and defaultDate is selectedDate 
            ' ' + this._dayOverClass : '') + // highlight selected day 
            (unselectable ? ' ' + this._unselectableClass + ' ui-state-disabled': '') + // highlight unselectable days 
            (otherMonth && !showOtherMonths ? '' : ' ' + daySettings[1] + // highlight custom dates 
            (printDate.getTime() == currentDate.getTime() ? ' ' + this._currentClass : '') + // highlight selected day 
            (printDate.getTime() == today.getTime() ? ' ui-datepicker-today' : '')) + '"' + // highlight today (if different) 
            ((!otherMonth || showOtherMonths) && daySettings[2] ? ' title="' + daySettings[2] + '"' : '') + // cell title 
            (unselectable ? '' : ' onclick="DP_jQuery_' + dpuuid + '.datepicker._selectDay(\'#' + 
            inst.id + '\',' + printDate.getMonth() + ',' + printDate.getFullYear() + ', this);return false;"') + '>' + // actions 
            (otherMonth && !showOtherMonths ? '&#xa0;' : // display for other months 
            (unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' + 
            (printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + 
            (printDate.getTime() == selectedDate.getTime() ? ' ui-state-active' : '') + // highlight selected day 
            (otherMonth ? ' ui-priority-secondary' : '') + // distinguish dates from other months 
            '" href="#">' + printDate.getDate() + '</a>')) + '</td>'; // display selectable date 
           printDate.setDate(printDate.getDate() + 1); 
           printDate = this._daylightSavingAdjust(printDate); 
          } 
          calender += tbody + '</tr>'; 
         } 
         drawMonth++; 
         if (drawMonth > 11) { 
          drawMonth = 0; 
          drawYear++; 
         } 
         calender += '</tbody></table>' + (isMultiMonth ? '</div>' + 
            ((numMonths[0] > 0 && col == numMonths[1]-1) ? '<div class="ui-datepicker-row-break"></div>' : '') : ''); 
         group += calender; 
        } 
        html += group; 
       } 
       html += buttonPanel + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? 
        '<iframe src="javascript:false;" class="ui-datepicker-cover" frameborder="0"></iframe>' : ''); 
       inst._keyEvent = false; 
       return html; 
      } 
    } 
); 
0

Hier ist das Ticket:

http://dev.jqueryui.com/ticket/5984

Es enthält das Update und eine Lösung für die komprimierte Version.

Ich denke, dass Sie Ihre Kopie von jQuery UI sicher ändern können. Das Problem ist bereits gelöst und sollte in der nächsten stabilen Version erscheinen.

Verwandte Themen