Disable previous dates of a datepicker according to selected date in javascript or 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.

Solution 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" />

Solution 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);

Comments

[Priya]

Its working..Thank you..:)...But very first time its working..For 2nd time its all dates are disable only except last day of the month.

[isuruAb]

describe your question please