change the second datepicker's minDate depending the first one

问题

I have two datePickers in the same page and I wanna change the second datepicker's minDate depending the first one. Here is my code:

$("#datepickerDepart" ).datepicker({
        dateFormat: "mm-dd-yy", 
                minDate: 0,
        onSelect: function(dateText, inst) {
          var m = dateText.substring(0,2);
          var d = dateText.substring(3,5);
          var y = dateText.substring(6,10);
          console.log(d);
          console.log(m);
          console.log(y);
          var newDate = new Date(y,m-1,d);
          console.log(newDate);
          $('#datepickerReturn').val("");
                      $('#datepickerReturn').datepicker({
              dateFormat: "mm-dd-yy",
              minDate: newDate
          })
             }
});

But I have a question, the first time I select a date in the first datePicker, the minDate of second one will be set according to this, but when I reselect the first one, the second datePicker's minDate won't change anymore, it will remain. I don't know why. Please help!!

I just wanna the minDate of the second one will change as long as the selected date of the first one change.

回答1:

You are updating the second datepicker incorrectly. I am assuming you have already initialized the second one previously, although your code posted doesn't appear to. You need to use the option syntax when updating it, instead of the constructor.

http://jqueryui.com/demos/datepicker/#option-minDate

$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});

Full code:

$('#datepickerReturn').datepicker({
              dateFormat: "mm-dd-yy",
              minDate: 0
          });
$("#datepickerDepart" ).datepicker({
        dateFormat: "mm-dd-yy", 
                minDate: 0,
        onSelect: function(dateText, inst) {
          var m = dateText.substring(0,2);
          var d = dateText.substring(3,5);
          var y = dateText.substring(6,10);
          console.log(d);
          console.log(m);
          console.log(y);
          var newDate = new Date(y,m-1,d);
          console.log(newDate);
          $('#datepickerReturn').val("");
          $('#datepickerReturn').datepicker({'option','minDate', newDate});
      }
});

回答2:

$("#strStartDate").datepicker({ 
  dateFormat: 'dd/mm/yy', 
  constrainInput: true,
  firstDay: 1,
  hideIfNoPrevNext: true,
  onSelect: function(){
        if ($("#strStartDate").val() > $("#strEndDate").val()){
            $("#strEndDate").val($("#strStartDate").val());
        }
  }

});

$("#strEndDate").datepicker({ 
  dateFormat: 'dd/mm/yy', 
  constrainInput: true,
  firstDay: 1,
  hideIfNoPrevNext: true,
  beforeShow: function (input, inst) {
        inst.settings.minDate = $("#strStartDate").val();
 }

});

回答3:

You can update secodn datepicker's mindate with following code :

 $( "#ddate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
onSelect: function (selectedDate) {
                    $("#rdate").datepicker("option", "minDate", selectedDate);
                },
                minDate: 'today'

}); 
$( "#rdate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
  minDate: 'today'

});

来源：https://stackoverflow.com/questions/12632738/change-the-second-datepickers-mindate-depending-the-first-one

标签

jquery-ui

onselect