How to set jquery ui datepicker width with few months

Question

How to set width of datepicker div when showing several months? I tried to change the css for .ui-datepicker-group and .ui-datepicker-multi, but when I view it in Firebug, the width will be overwritten.

Answer 1

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 can also change the font size, as Awais said, this is a good idea. The last option to play with width is to use multiple columns in the date and time user interface settings.

For instance:

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

6 2- , 12 .

Answer 2

div.ui-datepicker{
 font-size:10px;
}

Answer 3

, . , -, 51em. , , - tweek , .

Answer 4

, CSS:

• js datapicker ( jquery.ui.datepicker.js)

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

• width = 17;
• .

, .

Answer 5

. script , :

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

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

Answer 6

javascript jQuery UI datepicker 'r'

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

EM.

Answer 7

jquery-ui.js ,

(inst.dpDiv.addClass('ui-datepicker-multi-' + cols).css('width', px em, '')

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

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

, , jquery-ui , .

Answer 8

; "min-width" (inline) .

:

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

jQuery, min-width .

Note. You can also use this trick to calculate your responsive size using javascript / jQuery. Setting the width for container and group elements will not work; they will be overwritten when updating datepicker. So, create a style element and introduce 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; }'
);

Answer 9

It worked for me. Of course, you can set any width.

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

Answer 10

This is fixed for me.

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

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