Синхронизировать количество строк двух сборщиков дат jQuery UI

Question

У меня на странице есть два встроенных средства выбора даты, чтобы выбрать диапазон дат:

Как видите, в зависимости от месяца количество строк различается.Это выглядит довольно плохо, хотя.При использовании одного средства выбора даты с numberOfMonths > 1 он хорошо синхронизирует счетчик строк, но, к сожалению, это не поможет, так как мне нужны два средства выбора даты для выбора диапазона.

Так что я ищу решение для синхронизациичисло строк моих двух сборщиков даты;желательно без изменения исходного кода DatePicker (monkeypatching - это хорошо, но если этого можно избежать, было бы лучше, конечно)в этом нет необходимости, поскольку это также происходит без включения showOtherMonths, поэтому должно происходить и без каких-либо параметров):

$('#startDate, #endDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    showOtherMonths: true,
    selectOtherMonths: true,
});

Answer 1

Эта реакция немного запоздала, но я ненавижу, когда не могу найти решение на форуме

Найдите эту строку в сценарии выбора даты:

var numRows = (isMultiMonth ? this.maxRows > curRows ? this.maxRows : curRows : curRows); //If multiple months, use the higher number of rows (see #7043)

Измените его на:

numRows=6;

Answer 2

После проверки кода я заметил, что нет способа сделать это без взлома кода.Поэтому я добавил опцию, чтобы она всегда использовала шесть строк, и этого достаточно, независимо от того, какой месяц показывается.Вот патч на случай, если кто-то еще сочтет его полезным.

---

diff --git a/ui/jquery.ui.datepicker.js b/ui/jquery.ui.datepicker.js
index ed02335..87dafd4 100644
--- a/ui/jquery.ui.datepicker.js
+++ b/ui/jquery.ui.datepicker.js
@@ -104,7 +104,8 @@ function Datepicker() {
                altFormat: '', // The date format to use for the alternate field
                constrainInput: true, // The input is constrained by the current date format
                showButtonPanel: false, // True to show button panel, false to not show it
-               autoSize: false // True to size the input for the date format, false to leave as is
+               autoSize: false, // True to size the input for the date format, false to leave as is
+               unifyNumRows: false, // True to always use six rows; ensuring datepickers showing different months having the same height
        };
        $.extend(this._defaults, this.regional['']);
        this.dpDiv = $('<div id="' + this._mainDivId + '" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>');
@@ -1457,6 +1458,7 @@ $.extend(Datepicker.prototype, {
                var showOtherMonths = this._get(inst, 'showOtherMonths');
                var selectOtherMonths = this._get(inst, 'selectOtherMonths');
                var calculateWeek = this._get(inst, 'calculateWeek') || this.iso8601Week;
+               var unifyNumRows = this._get(inst, 'unifyNumRows');
                var defaultDate = this._getDefaultDate(inst);
                var html = '';
                for (var row = 0; row < numMonths[0]; row++) {
@@ -1495,7 +1497,7 @@ $.extend(Datepicker.prototype, {
                                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 numRows = ((isMultiMonth || unifyNumRows) ? 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 numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7));

на

var numRows = 6;

Answer 3

Я нашел решение путем обновления набора по умолчанию перед beforeShowDay:

Заменить эту строку

beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate]) : [true, ""]);

на

beforeShowDay.apply((inst.input ? inst.input[0] : null), [printDate, numRows]) : [true, ""]);

СейчасВы можете получить переменную rowCount в функции beforeShowDay. Вы можете добавить пользовательский класс для элемента td.

$("#datepicker").datepicker({

                beforeShowDay:function(currentDate,rowNumber)
                {  
                    return [false,' rowCount' + rowNumber, ""];
                }
            });

В файле CSS

.ui-datepicker td.rowCount6 {
padding: 10px 0px 11px 0px;
}

.ui-datepicker td.rowCount5 {
    padding: 15px 0px 15px 0px;
    }

Answer 4

Если вы открыты для использования другого средства выбора даты, это можно решить. Посмотрите на последний пример этого альтернативного плагина .