3

How can I set the width of the datepicker div when showing multiple months? I've tried changing the css for .ui-datepicker-group and .ui-datepicker-multi, but when I view it in Firebug the width is overwritten.

10 Answers 10

4

For future people who will have the same question:

It is also possible to use the "max-width" property:

.ui-datepicker{
  max-width: 1024px;
}

You also can modify the font-size as Awais said, this is a good idea. The last possibility to play with the width is to use multi-columns months in datepicker JQuery UI configuration.

For instance:

$( "#datepicker" ).datepicker({
    numberOfMonths: [2,6] # 2: number of month per column, 6: number of columns
});

This will create 6 columns with 2 months by column, so you'll have 12 months perfectly displayed on two lines with the width correctly set.

1
  • 1
    This is the only thing that worked for me "max-width"
    – Creator
    Commented Jan 8, 2018 at 3:48
3
div.ui-datepicker{
 font-size:10px;
}

this will help you

2

I don't think it's possible to set the width. The width seems to be hard-coded to 51em. The best solution I've come up with is to tweek the font-size until I get the size I need.

2

The best way of changing the width no matter what the CSS says is:

  1. Find the js file that has datapicker (usually jquery.ui.datepicker.js)
  2. Find

var origyearshtml, numMonths = this._getNumberOfMonths(inst) ...

  1. Just under that or same line you'll notice width=17;
  2. Change that to your preferred width.

this is the only solution that worked for me when using multiple months.

0
1

This worked for me. I have this script at the bottom, above closed body tag:

<script type="text/javascript">
    $("document").ready(function(){

        $(".ui-datepicker-inline").width("75em");
    });
</script>
1

Open the jQuery UI datepicker javascript file and change the 'r' variable

_updateDatepicker: func...
...
r=17;

to the number EM width you prefer.

1

Save the jquery-ui.js in your development package, search for this

(inst.dpDiv.addClass('ui-datepicker-multi-' + cols).css('width', here set the width in px or em, remember the '' )

$("document").ready(function(){

    $(".ui-datepicker-inline").width("75em");
});

that code works, but when the datepicker is modified, the jquery-ui update the width, so it only works on first load.

0

I found a solution to this problem; set the "min-width" to the (inline) container and groups.

Example:

.ui-datepicker-inline { min-width: 1848px; }
.ui-datepicker-group { min-width: 308px; }

The inline width styles would be overwritten by jQuery, but the global min-width value will overrule that width value.

Note: You can also use this trick to calculate your responsive size by javascript/jQuery. Setting the width to the container and group elements will not work; they will be overwritten when the datepicker is refreshing. So, create a style element and inject the css rules. jQuery snippet:

var $myExampleCalendarParentContainer = jQuery('.your-selector-here');
var $style = $myExampleCalendarParentContainer.children('style');
var $calendarContainer = $myExampleCalendarParentContainer.find('.ui-datepicker-inline');
var $items = $calendarContainer.find('.ui-datepicker-group');
var monthWidth = 300; //desired pixel width per month

$style.html(
    '.ui-datepicker-inline { min-width:' + monthWidth * $items.length + 'px; }'
    + '.ui-datepicker-group { min-width:' + monthWidth + 'px; }'
);
0

This worked for me. You could of course set any width you want.

.ui-datepicker-multi {width:100% !important}

0

This fixed it for me

  .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    visibility: hidden;
     width:100% !important;
}

 .ui-datepicker-group {width:100% !important}`

Your Answer

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

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