Geek Answers Handbook

The drop-down menu is disabled when you select any field in the date pick list

I have a drop-down list where a user can register. I have a date of birth in which there is a date picker. When I select something in the datepicker, the dropdown menu disappears.

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>
+4
source share
3 answers

Add the functions below onSelectand onCloseto keep it open (run the snippet to see how it works):

 $("#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>
Run codeHide result
+2
source

As far as I know, this is how the date picker should work. You click on an input element and it shows a datupike, and then when you select a date, it disappears and places the value selected in the input element.

, 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>
Hide result
+1

:

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

https://jsfiddle.net/pgujyp1k/

+1
source

More articles:


All Articles