How to set default size for jquery datepicker?

Question

Take a look on this page . The date picker itself (called <div id="calendar"> ) has a width of "68em". Then I use $("#calendar").children().css("width","auto"); to set the width to auto (so that it fills the page). As you can see, this works. However, changing the month (using the buttons) causes jQuery to change the width backward. Is there a proper way to fix this?

Answer 1

Quick and dirty solution - use ! important ! important to overwrite the styles specified for an element:

 #calendar .ui-datepicker-inline { width: auto ! important } 

It's ugly, but it works without too much fuss.

Answer 2

You can set the width to a fixed value only with CSS.

If you want to use Javascript to set the width of #calendar, you must attach the JS resize function to the onChangeMonthYear event.

From jQuery UI site :

 $('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } });