jquery datepicker -将datepicker放在文本字段下
jquery datepicker -将datepicker放在文本字段下
提问于 2015-12-15 06:09:12
我有一个考试日期字段，如下图所示：
我的代码：
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"> </script>
<script type="text/javascript">
$(function(){
$("#datepicker1").datepicker({dateFormat: 'dd-mm-yy'});
});
</script>
<style>
.ui-datepicker{
font-size: 9.5pt;
}
.ui-widget-header{
font-size: 12px;
color: #102132;
background: #D7E5F2;
}
#ui-datepicker-div .ui-state-highlight{
background: yellow;
color: red;
font-weight: bold;
}
.ui-datepicker-current-day .ui-state-active{
background: white;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" name="examdate" id="datepicker1" />
</body>
</html>现在我的问题是，当我单击文本字段时，我希望日期选择器位于文本字段下。该怎么修改呢？
回答 2
Stack Overflow用户
发布于 2015-12-15 06:56:04
$(function(){
$("#datepicker1").datepicker({
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var rect = input.getBoundingClientRect();
setTimeout(function () {
inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
}, 0);
}
});
});<style>
.ui-datepicker{
font-size: 9.5pt;
}
.ui-widget-header{
font-size: 12px;
color: #102132;
background: #D7E5F2;
}
#ui-datepicker-div .ui-state-highlight{
background: yellow;
color: red;
font-weight: bold;
}
.ui-datepicker-current-day .ui-state-active{
background: white;
color: blue;
font-weight: bold;
}
</style><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>
<input type="text" name="examdate" id="datepicker1" />
Stack Overflow用户
发布于 2015-12-15 07:10:11
JQuery datepicker自动调整UI Ca lender，我们不需要管理它。如果文本框上方有适当间距，则会显示默认设置。
如果它没有适当的空间，那么它将自动显示在文本字段下。如你所愿。
只需向下滚动并单击文本字段即可。它会在你想看的地方显示出来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34282206
复制相关文章
点击加载更多
相似问题
jquery UI datepicker将按钮放在字段之前
将jQuery DatePicker拆分为隐藏字段
jquery根据datepicker填充输入文本字段
如何将文本视图放在datepicker的顶部
jQuery DatePicker - DatePicker不是函数
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
