Question

我正在使用jquery ui datepicker显示datepicker，当有人在下面的代码片段的帮助下点击输入时。

代码：

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

JSFIDDLE

我遇到的问题是日历应该是之前输入的全宽。

我确实搜索了互联网并使用了一些代码片段，但都没有效果。

我的方法：

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

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

Answer 1

您可以使用以下CSS调整日历大小：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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">

＆＃13;

Answer 2

不幸的是，

Datepicker show函数重置了宽度参数，甚至是“beforeShow”回调中的一个设置。为了解决这个问题，我们可以通过setTimeout（）在JS Call Stack上显示后移动它。

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

自定义jQuery ui datepicker width

2 个答案: