同步两个jQuery UI日期选择器的行数

Question

我的页面上有两个内联日期选择器，用于选择日期范围：

如您所见，根据行数的不同而不同。这看起来很糟糕。当使用带有numberOfMonths > 1的单个日期选择器时，它可以很好地同步行计数，但不幸的是，这对我没有帮助，因为我需要两个日期选择器来选择范围。

所以我正在寻找一种解决方案来同步我的两个日期选择器的行数;最好不要修改原始的datepicker代码（monkeypatching很好，但如果可以避免它当然会更好）。

这是我用来创建日期选择器的代码（即使你可能不需要它，因为它也没有启用showOtherMonths - 所以它应该没有任何选项）：< / p>

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

Answer 1

这个反应有点迟了，但我讨厌在论坛上找不到解决方案

在datepicker脚本中查找此行：

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, ""]);

现在你可以在beforeShowDay函数上获取rowCount变量。你可以在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

如果您愿意使用其他日期选择器，则可以解决此问题。请看the last example on this alternative plugin。