Javascript jquery datepicker-将datepicker放在textfield下_Javascript_Jquery_Html_Datepicker

Javascript jquery datepicker-将datepicker放在textfield下

javascript jquery html

Javascript jquery datepicker-将datepicker放在textfield下,javascript,jquery,html,datepicker,Javascript,Jquery,Html,Datepicker,我有一个考试日期字段，如下图所示：我的代码： <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/ja

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

我的代码：

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


$（函数（）{
$（“#datepicker1”）.datepicker（{dateFormat:'dd-mm-yy'}）；
});
.ui日期选择器{
字号：9.5pt；
}
.ui小部件头{
字体大小：12px；
颜色：#102132；
背景：#D7E5F2；
}
#ui日期选择器分区ui状态突出显示{
背景：黄色；
颜色：红色；
字体大小：粗体；
}
.ui日期选择器当前日期.ui状态处于活动状态{
背景：白色；
颜色：蓝色；
字体大小：粗体；
}

现在我的问题是，当我单击文本字段时，我希望文本字段下有日期选择器。我应该如何修改它？

$（函数（）{
$（“#日期选择器1”）。日期选择器({
日期格式：“mm/dd/yy”，
显示前：功能（输入、安装）{
var rect=input.getBoundingClientRect（）；
setTimeout（函数（）{
inst.dpDiv.css（{top:rect.top+40，left:rect.left+0}）；
}, 0);
}
});
});

.ui日期选择器{
字号：9.5pt；
}
.ui小部件头{
字体大小：12px；
颜色：#102132；
背景：#D7E5F2；
}
#ui日期选择器分区ui状态突出显示{
背景：黄色；
颜色：红色；
字体大小：粗体；
}
.ui日期选择器当前日期.ui状态处于活动状态{
背景：白色；
颜色：蓝色；
字体大小：粗体；
}

JQuery datepicker自动调整UI Ca贷方，我们不需要管理它。
如果文本框上方有适当的空间，则会显示其默认值
如果它没有适当的空间，那么它将自动显示在文本字段下。随你的便
只需轻轻向下滚动并单击文本字段。它将显示在您希望看到的位置。
底部是否有足够的空间让日期选择器打开它？似乎工作正常。@zan是的，有足够的空间Alorika fiddle在我看来不错，您能创建fiddle吗？我从