3

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

Datepickers with different row counts

As you can see, depending on the months the number of rows 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,
});

4 Answers 4

4

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

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

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;
    }
-1

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

1
  • From what I know the eyecon plugins are the predecessors of the UI widgets. Besides that, I'd like to stay with the UI datepicker to not have to maintain the theme at two places. Mar 29, 2011 at 10:57

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.