Clever Geek Handbook

Disable previous dates datepicker according to selected date in javascript or jquery

I have two datepickers like startdate and enddate. If I select June 18, 2015 in startdate, I have to disable the previous dates in the datepicker before 18thune2015 in the enddate.

Here is my code.

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

For the end date:

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

Does not work. Can anyone help me on this. thank.

+3


source to share


4 answers


You need to set it using the options method when the start date changes



$("#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" />
Run codeHide result


+7


source


Try adding yearRange

:



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


source


You must use option

insted

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

Do it:

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

Change review in datepicker

0


source 


$("#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" />
0


source






More articles:


All Articles