下拉菜单在选择日期选择器中的任何字段时关闭
下拉菜单在选择日期选择器中的任何字段时关闭
提问于 2015-05-11 21:44:53
我有一个下拉列表，用户可以在其中注册。我有一个出生日期字段，其中有一个日期选择器。当我在datepicker中选择任何内容时，下拉菜单就会消失。
JS：
$( " #datepicker " ).datepicker ({
maxDate: 0,
changeMonth: true,
changeYear: true,
dateFormat : 'dd-mm-yy',
yearRange: '1955:2030'
});HTML：
<div class="row form-group" >
<h6 class="lable">Date Of Birth</h6>
<input type="text" id="datepicker" placeholder="Date of Birth" name="dateofbirth" class="form-control text-field" required/>
</div>回答 3
Stack Overflow用户
发布于 2015-05-11 22:15:18
添加以下onSelect和onClose函数以使其保持打开状态(运行代码片段以查看其工作情况)：
$("#datepicker").datepicker({
maxDate: 0,
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
yearRange: '1955:2030',
onSelect: function () {
$(this).data('datepicker').inline = true;
},
onClose: function () {
$(this).data('datepicker').inline = false;
}
});<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="row form-group">
<h6 class="lable">Date Of Birth</h6>
<input type="text" id="datepicker" placeholder="Date of Birth" name="dateofbirth" class="form-control text-field" required/>
</div>
Stack Overflow用户
发布于 2015-05-11 21:50:52
据我所知，这就是datepicker的工作原理。您单击一个input元素，它会显示datepicker，然后当您选择一个日期时，它会消失并将选定的值放入input元素中。
你需要确保你正在加载jQuery，jQuery UI和任何你正在使用的主题。
$("#datepicker").datepicker({
maxDate: 0,
changeMonth: true,
changeYear: true,
dateFormat: 'dd-mm-yy',
yearRange: '1955:2030'
});<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="row form-group">
<h6 class="lable">Date Of Birth</h6>
<input type="text" id="datepicker" placeholder="Date of Birth" name="dateofbirth" class="form-control text-field" required/>
</div>
Stack Overflow用户
发布于 2015-05-11 21:51:56
试试这个：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30169333
复制相关文章
相似问题
腾讯云开发者
