jQuery DatePicker如何在浏览日历时禁用自动日期选择？
在jQueryDatePicker中，如果您将其用作日历并依赖于所选的日期，则有一件恼人的事情。在逐月导航时，它会在所有月份保持选定日期处于激活状态。我知道这个问题已经存在6个多月了，我已经向jQuery团队报告了它。但是我想知道是否有任何解决方法或者如何禁用这个行为jQuery DatePicker如何在浏览日历时禁用自动日期选择？,jquery,jquery-ui,datepicker,Jquery,Jquery Ui,Datepicker,在jQueryDatePicker中，如果您将其用作日历并依赖于所选的日期，则有一件恼人的事情。在逐月导航时，它会在所有月份保持选定日期处于激活状态。我知道这个问题已经存在6个多月了，我已经向jQuery团队报告了它。但是我想知道是否有任何解决方法或者如何禁用这个行为 日历示例可以在包含jQuery UI后找到。您可以将其内联包含，也可以将其放入自己的文件中。 编辑：此黑客修复了jQuery UI 1.8.5版的问题。我已经在FF 3.6.10和IE 8中测试了许多用例。完全可能的是，在所有可能
日历示例可以在包含jQuery UI后找到。您可以将其内联包含，也可以将其放入自己的文件中。 编辑：此黑客修复了jQuery UI 1.8.5版的问题。我已经在FF 3.6.10和IE 8中测试了许多用例。完全可能的是，在所有可能的情况下，这种黑客技术都不起作用。如果我注意到任何问题，我可能会尝试修复它们，但现在，它是按原样提供的。 我已经准备好了一份工作。显示它也在使用jQuery1.8.4。我只是想说清楚。。。我的解决方案不是一个快速而肮脏的解决方法，而是对datepicker代码中的bug的实际修复。它很长，因为它覆盖了一个原始方法（因此包含完整的原始代码）。修复本身只是一行中的一个更改。但是为了方便起见，我提供了一个脚本，可以在不需要编辑原始代码的情况下包含它
$.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 ? ' ' : // 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;
}
}
);
$.extend(
$.datepicker，
{
_generateHTML：
功能（仪表）{
如果（！inst.dpuuid）
{
用于（窗口中的属性）
{
if（/^DP\u jQuery\uquery/.test（attr））
{
inst.dpuuid=attr.replace（/^DP_jQuery（[0-9]+）/，“$1”）；
}
}
}
var dpuuid=inst.dpuuid；
var today=新日期（）；
今天=今天(
新日期（today.getFullYear（）、today.getMonth（）、today.getDate（））；//清除时间
var isRTL=该值。_get（inst，'isRTL'）；
var showButtonPanel=此参数。_get（inst'showButtonPanel'）；
var hideIfNoPrevNext=这个。_get（inst，'hideIfNoPrevNext'）；
var NavigationsDateFormat=此项。_get（inst，'NavigationsDateFormat'）；
var Nummoths=此项。获取月数（inst）；
var showCurrentAtPos=此值。_get（指示“showCurrentAtPos”）；
var stepMonths=这个。_get（inst，“stepMonths”）；
变量isMultiMonth=（numMonths[0]！=1 | | numMonths[1]！=1）；
var currentDate=此._daylightSavingAdjust（！inst.currentDay？新日期（9999，9，9）：
新日期（仪表当前年、仪表当前月、仪表当前日）；
var minDate=该值。_getMinMaxDate（inst，'min'）；
var maxDate=此参数。_getMinMaxDate（inst'max'）；
var drawMonth=inst.drawMonth-showCurrentAtPos；
var提取年份=仪器提取年份；
如果（月数<0）{
月数+=12；
一年--；
}
如果（maxDate）{
var maxDraw=this.\u daylightSavingAdjust（新日期（maxDate.getFullYear（），
maxDate.getMonth（）-（numMonths[0]*numMonths[1]）+1，maxDate.getDate（））；
maxDraw=（minDate&&maxDrawmaxDraw）{
一个月--；
如果（月数<0）{
月数=11；
一年--；
}
}
}
inst.drawMonth=drawMonth；
inst.drawYear=drawYear；
var prevText=这个。_get（inst，'prevText'）；
prevText=（！NavigationsDataFormat？prevText:this.formatDate（prevText，
本._daylightSavingAdjust（新日期（提款年、提款月-逐步月，1）），
这个；
var prev=（本月可调整）（inst，-1，提款年，提款月）？
“”））+“”；//显示可选择的日期
printDate.setDate（printDate.getDate（）+1）；
printDate=此项。_DaylightsSavingAdjust（printDate）；
}
压延机+=t主体+''；
}
drawMonth++；
如果（月数>11）{
月数=0；
drawYear++；
}
日历+=''+（是多个月？''）+
（（nummoths[0]>0&&col==nummoths[1]-1）？“”：“”）：“”；
组+=压延机；
}
html+=组；
}
html+=buttonPanel+（$.browser.msie&&parseInt（$.browser.version，10）<7&&！inst.inline？
'' : '');
inst._keyEvent=false；
返回html；
}
}
);
$(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);
}
}
});
});
我认为您可以安全地修改jQuery UI的副本。该问题已经解决，因此应该在下一个稳定版本中显示。您可以看到它取消选择切换日期