jQuery DatePicker如何在浏览日历时禁用自动日选择？

在jQuery DatePicker中，如果您将其用作日历并依赖于所选日期，则会有一件烦人的事情。 在每月导航时，它会保持所选月份的所有月份。 我知道这个问题存在超过6个月，我已经向jQuery团队报告了。但是我想知道是否有任何变通方法或如何禁用此行为？

可以在此处找到日历示例

Answer 1

这是我弄清楚的解决方法。

$(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); } } }); });​ 

疯狂的演示

Answer 2

在包含jQuery UI 之后包含此脚本。 您可以将其包含在内联中，也可以将其放在自己的文件中。 编辑 ：这个hack修复了你的jQuery UI 1.8.5版本的问题。 我已经在FF 3.6.10和IE 8中测试了许多用例。完全有可能这个hack在所有可能的情况下都不起作用。 如果我发现任何问题，我可能会尝试修复它们，但就目前而言，它是按原样提供的。 我把一个演示组合在一起。 显示它也在使用jQuery 1.8.4。 为了清楚起见……我的解决方案不是一个快速而肮脏的解决方法，它是对datepicker代码中的错误的实际修复。 它太长了，因为它覆盖了原始方法（因此完整地包含了原始代码）。 修复本身只是一行的变化。 但是为了方便起见，我已经将修复程序作为一个脚本提供，而不必编辑原始代码。

 $.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) ? '' + prevText + '' : (hideIfNoPrevNext ? '' : '' + prevText + '')); 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) ? '' + nextText + '' : (hideIfNoPrevNext ? '' : '' + nextText + '')); 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 ? '' + this._get(inst, 'closeText') + '' : ''); var buttonPanel = (showButtonPanel) ? '
' + (isRTL ? controls : '') + (this._isInRange(inst, gotoDate) ? '' + currentText + '' : '') + (isRTL ? '' : controls) + '
' : ''; 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 += '
'; } calender += '
' + (/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 '
' + ''; var thead = (showWeek ? '' : ''); for (var dow = 0; dow < 7; dow++) { // days of the week var day = (dow + firstDay) % 7; thead += '= 5 ? ' class="ui-datepicker-week-end"' : '') + '>' + '' + dayNamesMin[day] + ''; } calender += thead + ''; 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 += ''; var tbody = (!showWeek ? '' : ''); 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 += ''; // display selectable date printDate.setDate(printDate.getDate() + 1); printDate = this._daylightSavingAdjust(printDate); } calender += tbody + ''; } drawMonth++; if (drawMonth > 11) { drawMonth = 0; drawYear++; } calender += '
' + this._get(inst, 'weekHeader') + '
' + this._get(inst, 'calculateWeek')(printDate) + '
' + // actions (otherMonth && !showOtherMonths ? ' ' : // display for other months (unselectable ? '' + printDate.getDate() + '' : '' + printDate.getDate() + '')) + '
' + (isMultiMonth ? '
' + ((numMonths[0] > 0 && col == numMonths[1]-1) ? '
' : '') : ''); group += calender; } html += group; } html += buttonPanel + ($.browser.msie && parseInt($.browser.version,10) < 7 && !inst.inline ? '' : ''); inst._keyEvent = false; return html; } } ); 

Answer 3

这是门票：

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

它包括修复和压缩版本的解决方法。

我想你可以安全地修改你的jQuery UI副本。 问题已经解决，所以它应该出现在下一个稳定版本中。