Customizing jQuery ui datepicker width

Question

I am using jquery ui datepicker to show datepicker when someone clicks on the input with the help of following code snippet.

Code:

$('#datepicker').datepicker();

JSFIDDLE

The problem I have with this is that the calendar should come as full width of the input before it.

I did search the internet and used a few code snippets but none worked.

My approach:

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({ width: input.width + 'px'});
    }
});

In the Fiddle the input's width is fixed as 500px, so datepicker width should also be 500px wide. And datepicker's width should adapt to whatever width is of this input.

Answer 1

You can adjust the calendar size using the below CSS:

 $('#datepicker').datepicker(); 

 #datepicker, .ui-datepicker, .ui-datepicker-header, .ui-datepicker-calendar { width: 500px; } .ui-datepicker-calendar { background: dodgerblue; } .ui-datepicker-header { text-align: center; color: #fff; background: #000; } .ui-datepicker-prev { float: left; } .ui-datepicker-next { float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <input type="text" id="datepicker"> 

Answer 2

Datepicker show function unfortunately resets width parameter, even one set in "beforeShow" callback. To fix this we can move it after show on JS Call Stack by setTimeout().

$('#datepicker').datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function(){
            inst.dpDiv.outerWidth($(input).outerWidth());
        },0);
    },
})