jQuery DatePicker, как отключить автоматический выбор дня при просмотре календаря? - PullRequest
5 голосов
/ 01 октября 2010

В jQuery DatePicker есть одна раздражающая вещь, если вы используете его в качестве календаря и зависите от выбранной даты.При навигации из месяца в месяц выбранный день остается активным для всех месяцев.Я знаю, что эта проблема существует более 6 месяцев, и я сообщил об этом в jQuery Team. Однако я хотел бы знать, есть ли какие-нибудь обходные пути или как отключить это поведение?* здесь

Ответы [ 3 ]

8 голосов
/ 11 октября 2010

вот обходной путь, который я понял.

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

сумасшедшая демонстрация

2 голосов
/ 09 октября 2010

Включите этот скрипт после вы включили JQuery UI.Вы можете включить его в строку или поместить в отдельный файл. edit : Этот хак исправляет вашу проблему для версии 1.8.5 пользовательского интерфейса jQuery.Я протестировал несколько вариантов использования в FF 3.6.10 и IE 8. Вполне возможно, что этот хак не работает при всех возможных обстоятельствах.Если я замечу что-либо, я, вероятно, постараюсь исправить их, но пока это предоставляется как есть.Я собрал вместе демо .Показывает, что он работает с 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) ?
                    '<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 голосов
/ 14 октября 2010

Вот билет:

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

Включает исправление и обходной путь для сжатой версии.

Я думаю, вы можете изменить свою копию jQuery UIбезопасно.Эта проблема уже решена, поэтому она должна появиться в следующем стабильном выпуске.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...