自定義日期選擇器寬度

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");
});