自定义日期选择器宽度

Question

我有一个输入字段。 如何使jquery的datepicker与输入字段具有相同的宽度？

我尝试了以下操作，但不起作用。

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

Answer 1

尝试使用beforeShow属性：

创建日期选择器时，请像这样设置beforeShow属性：

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

如果字体太大，您可能仍然需要将其放入CSS中：

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

Answer 2

由于输入的宽度可能会有所不同，因此您必须为每个输入设置数据选择器的宽度。

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