Synchronize row count of two jQuery UI datepickers

I have two inline datepickers on my page to select a date range:

As you can see, depending on the months the number of r开发者_如何学Goows differ. This looks pretty bad though. When using a single datepicker with numberOfMonths > 1 it synchronizes the row counts nicely, but unfortunately that won't help me as I need two datepickers to select a range.

So I'm looking for a solution to synchronize the row counts of my two datepickers; preferably without modifying the original datepicker code (monkeypatching is fine, but if it can be avoided it would be better of course).

Here's the code I'm using to create the date pickers (even though you probably don't need it since it also happens without showOtherMonths being enabled - so it should occur without any options, too):

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

This reaction is a bit late, but I hate when I can't find the solution on a forum

Look for this line in the datepicker script:

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

Change it to:

numRows=6;

Aftering checking the code I've noticed there's no way to do so without hacking the code. So I've added an option to make it always use six rows which is sufficient no matter which month is being shown. Here's the patch in case someone else thinks it's useful, too.

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>';

If you don't want an option, just replace

var numRows = (isMultiMonth ? 6 : Math.ceil((leadDays + daysInMonth) / 7));

with

var numRows = 6;

I found a solution by update a default set beforeShowDay function :

Replace this row

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

to

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

Now you can get the rowCount variable on beforeShowDay function.you can add custom class on td element.

$("#datepicker").datepicker({

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

In css file

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

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

If you are open to using a different datepicker, this can be solved. Look at the last example on this alternative plugin.