jQuery DatePicker with Multiple Months Side-By-Side Layout Issue

Question

We are trying to get two months showing side by side on a standard jQuery DatePicker control using jQuery UI 1.7.2 and jQuery 1.3.2.

Unfortunately, the calendars will only stack vertically, and as a side effect are twice as wied as they should be (ugly!)

Here is the code we are using to call it:

$('#element').datepicker({numberOfMonths:2,dateFormat: 'dd-mm-yy',minDate: new Date()});

We are using the standard jQuery style sheet and no other style sheets are affecting the control (according to Firebug).

Seemingly this was supposedly a CSS issue that was fixed in the jQuery DatePicker project (http://dev.jqueryui.com/ticket/2898), however we are still getting this issue in FF and IE.

Any thoughts on a fix? Thank you :D

Answer 1

This was the best solution for the problem... http://www.filamentgroup.com/examples/daterangepicker_v2/index3.php

After some hacking I was able to remove the nasty menu and just get the date picker showing.

Answer 2

This can still be an issue in FireFox and version 4.0.4 of Date Picker. Have a look in the javascript source code (jquery.datepick.js) around line 1809. The code section looks like this:

    // Resize
    $('body').append(picker);
    var width = 0;
    picker.find(renderer.monthSelector).each(function() {
        width += $(this).outerWidth();
    });

and change the width from:

var width = 0;

to

var width = 0.5;

For me, that fixed FireFox (v3.6.x) laying out side-by-side and Chrome, IE, Safari etc still look great.