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
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
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.
The best way of changing the width no matter what the CSS says is:
- Find the js file that has datapicker (usually jquery.ui.datepicker.js)
- Find
var origyearshtml, numMonths = this._getNumberOfMonths(inst) ...
- Just under that or same line you'll notice width=17;
- Change that to your preferred width.
this is the only solution that worked for me when using multiple months.
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>
Open the jQuery UI datepicker javascript file and change the 'r' variable
_updateDatepicker: func...
...
r=17;
to the number EM width you prefer.
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.
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; }'
);
This worked for me. You could of course set any width you want.
.ui-datepicker-multi {width:100% !important}
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}`