Yukki Yukki - 2 months ago 13
Javascript Question

How to remove maxDate in datepicker?

I have this code below working fine. But How to remove a maxDate in

StartDate
if I change the
DateEnd
?.

For example my
DateStarted
is
09/26/2016
and the
End
is
09/30/2016
it has a
maxDate and minDate
as you can see each of the code. What I want is if I clear the
Enddate
the
maxDate
in
Startdate
will be removed it can select again the whole 12 months.

HTML



< input type="text" id = "TrainingProgram_DateStarted" >
< input type="text" id = "TrainingProgram_DateEnded" >


JS



$("#TrainingProgram_DateStarted").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function (dateText) {
$("#TrainingProgram_DateEnded").datepicker('option', 'minDate', dateText);
}
});

$("#TrainingProgram_DateEnded").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function (dateText) {
$("#TrainingProgram_DateStarted").datepicker('option', 'maxDate', dateText);
}
});


FIDDLE

Answer

onSelect event of datepicker is triggered when value from datepicker is chosen. if you clear the input value, above event is not going to get triggered. You should have change event for enddate and check if value is empty. if empty then set maxDate of start input as null:

$("#TrainingProgram_DateEnded").change(function(){
  if($(this).text().trim().length == 0)
   $("#TrainingProgram_DateStarted").datepicker('option', 'maxDate', null);
 }).datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {
       $("#TrainingProgram_DateStarted").datepicker('option', 'maxDate', dateText);
    }
});

Working Demo

Comments