我有一个考试日期字段，如下图所示:
我的代码:
<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>
现在我的问题是，当我单击文本字段时，我想要文本字段下方的日期选择器。应该如何修改？
最佳答案
$(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" />关于javascript - jquery datepicker - 将日期选择器放在文本字段下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34282206/