自定义 jQuery ui 日期选择器宽度
Customizing jQuery ui datepicker width
我正在使用 jquery ui 日期选择器,当有人在以下代码片段的帮助下点击输入时显示日期选择器。
代码:
$('#datepicker').datepicker();
我遇到的问题是日历应该是它之前输入的全宽。
我确实在互联网上进行了搜索并使用了一些代码片段,但 none 有效。
我的做法:
$('#datepicker').datepicker({
beforeShow: function(input, inst)
{
inst.dpDiv.css({ width: input.width + 'px'});
}
});
在Fiddle中输入的宽度固定为500px,所以datepicker宽度也应该是500px宽。并且 datepicker 的宽度应该适应这个输入的任何宽度。
您可以使用以下方法调整日历大小 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">
不幸的是,Datepicker show 函数重置了宽度参数,甚至在 "beforeShow" 回调中设置了一个。为了解决这个问题,我们可以通过 setTimeout() 在 JS 调用堆栈上显示后移动它。
$('#datepicker').datepicker({
beforeShow: function (input, inst) {
setTimeout(function(){
inst.dpDiv.outerWidth($(input).outerWidth());
},0);
},
})
我正在使用 jquery ui 日期选择器,当有人在以下代码片段的帮助下点击输入时显示日期选择器。
代码:
$('#datepicker').datepicker();
我遇到的问题是日历应该是它之前输入的全宽。
我确实在互联网上进行了搜索并使用了一些代码片段,但 none 有效。
我的做法:
$('#datepicker').datepicker({
beforeShow: function(input, inst)
{
inst.dpDiv.css({ width: input.width + 'px'});
}
});
在Fiddle中输入的宽度固定为500px,所以datepicker宽度也应该是500px宽。并且 datepicker 的宽度应该适应这个输入的任何宽度。
您可以使用以下方法调整日历大小 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">
不幸的是,Datepicker show 函数重置了宽度参数,甚至在 "beforeShow" 回调中设置了一个。为了解决这个问题,我们可以通过 setTimeout() 在 JS 调用堆栈上显示后移动它。
$('#datepicker').datepicker({
beforeShow: function (input, inst) {
setTimeout(function(){
inst.dpDiv.outerWidth($(input).outerWidth());
},0);
},
})