Question

我有一个用户可以注册的下拉菜单。我有一个出生日期，有一个日期选择器。当我在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>

Answer 1

添加以下onSelect和onClose功能以使其保持打开状态（运行代码段以使其正常工作）：

＆＃13;

 $("#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;
   }
 });

＆＃13;

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

＆＃13;

Answer 2

据我所知，这就是日期选择器的工作原理。单击一个输入元素并显示日期选择器，然后当您选择一个日期时，它会消失并将选定的值放入输入元素中。

您需要确保加载jQuery，jQuery UI以及您正在使用的任何主题。

＆＃13;

 $("#datepicker").datepicker({
   maxDate: 0,
   changeMonth: true,
   changeYear: true,
   dateFormat: 'dd-mm-yy',
   yearRange: '1955:2030'
 });

＆＃13;

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

＆＃13;

Answer 3

试试这个：

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

选择日期选择器中的任何字段时，下拉菜单都会消失

3 个答案:

的 https://jsfiddle.net/pgujyp1k/