我有一个考试日期字段,如下图所示:
我的代码:
<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>
现在我的问题是,当我单击文本字段时,我希望日期选择器位于文本字段下。该怎么修改呢?
发布于 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" />
发布于 2015-12-15 07:10:11
JQuery datepicker自动调整UI Ca lender,我们不需要管理它。如果文本框上方有适当间距,则会显示默认设置。
如果它没有适当的空间,那么它将自动显示在文本字段下。如你所愿。
只需向下滚动并单击文本字段即可。它会在你想看的地方显示出来。
https://stackoverflow.com/questions/34282206
复制相似问题