jquery datepicker - 将 datepicker 放在文本字段下答案

【问题标题】：jquery datepicker - put datepicker under the textfieldjquery datepicker - 将 datepicker 放在文本字段下
【发布时间】：2015-12-15 06:09:11
【问题描述】：

我有一个如下图所示的考试日期字段：

我的代码：

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

现在我的问题是当我单击文本字段时，我想要文本字段下的日期选择器。应该怎么修改？

【问题讨论】：

底部是否有足够的空间让日期选择器打开它？
似乎工作正常here。
@zan 是的，有足够的空间
Alorika fiddle 我觉得不错，你能创作出小提琴吗？

标签： javascript jquery html datepicker

【解决方案1】：

$(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" />

【讨论】：

我从link得到了解决方案

【解决方案2】：

JQuery datepicker 自动调整 UI Ca lender，我们不需要管理它。如果它在文本框上方有适当的空间，则默认显示。

如果它没有适当的空间，那么它将自动显示在文本字段下。随心所欲。

只需向下滚动并单击文本字段。它会以你想看到的方式显示出来。

【讨论】：