自定义jQuery ui datepicker宽度

Question

当有人在以下代码段的帮助下单击输入时，我正在使用jquery ui datepicker显示日期选择器。

码：

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

的jsfiddle

我的问题是日历应该以输入之前的完整宽度显示。

我确实在互联网上搜索并使用了一些代码段，但没有一个起作用。

我的方法：

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

在小提琴中，输入的宽度固定为500px，因此datepicker宽度也应为500px宽。 datepicker的宽度应适应此输入的任何宽度。

Answer 1

您可以使用以下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函数不幸地重置了width参数，即使是在“ beforeShow”回调中设置了一个也是如此。 为了解决这个问题，我们可以在setTimeout（）在JS Call Stack上显示之后将其移动。

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