根据javascript或jquery中的选定日期禁用日期选择器的先前日期

Question

I have two datepickers like startdate and enddate.If i select 18th june 2015 in startdate i have to disable previous dates in datepicker to 18thjune2015 in enddate.

Here is my code.

 $("#txtstartdate").datepicker({ minDate: 0 });

For end-date:

    var startdate = $("#txtstartdate").val();
    $("#txtenddate").datepicker({ minDate: startdate }); 

Its not working. Can anyone pls help me on this. thank you.

Answer 1

You need to set it using the option method on change of start date

 $("#txtstartdate").datepicker({ minDate: 0, onSelect: function(date) { $("#txtenddate").datepicker('option', 'minDate', date); } }); $("#txtenddate").datepicker({});

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script> <input id="txtstartdate" /> <input id="txtenddate" />

Answer 2

If you use input tag with attribute type="datetime-local" try this:

let today = new Date().toLocaleString('sv-SE').slice(0, 16).replace(' ', 'T');
document.getElementById('someId').setAttribute("min", today);

Answer 3

Try adding yearRange :

$("#txtenddate").datepicker({ 
    minDate: startdate,
    yearRange: '1999:2020', 
}); 

Answer 4

You have to use option

insted of

$("#txtenddate").datepicker({ minDate: startdate }); 

Do This:

$("#txtenddate").datepicker('option', 'minDate', date);

Change mindate in datepicker

Answer 5

$("#txtstartdate").datepicker({
  minDate: 0,
  onSelect: function(date) {
    $("#txtenddate").datepicker('option', 'minDate', date);
  }
});

$("#txtenddate").datepicker({});



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="txtstartdate" />
<input id="txtenddate" />

Answer 6

If minDate is not working, you can try startDate it will work definitely.

$('#datepicker4').datepicker({
  autoclose: true,
  startDate: new Date() 
 });