Customising date-picker width

Question

I've got an input field. How can I make jquery's datepicker to be the same width as the input field?

I tried the below but doesn't work.

var datesW=$('#dates').width();
console.log(datesW);
$('#dates.ui-datepicker').attr('style', 'width: '+datesW+'px !important');

Answer 1

Try using the beforeShow property:

When creating the datepicker, set the beforeShow property like this:

$("#dates").datepicker({
    beforeShow: function(input, inst) {
        setTimeout(function(){
            var datesW=$('#dates').width();
            console.log(datesW);
            $('#dates.ui-datepicker').css('width',datesW+'px');
        },0);
    }
});

If the font is too big, you might still need to put this into the css as well:

.ui-datepicker{
 font-size:12px; //Or adjust it if it is still too large or small
}

Answer 2

Because input's width may vary, you have to set datapicker's width for each input.

$("input.hasDatepicker").click(function () {
    $("#ui-datepicker-div")
        // BTW, min-width is better:
        //.css("min-width", $(this).outerWidth() + "px");
        .css("width", $(this).outerWidth() + "px");
});