jquery-ui - 根据第一个更改第二个日期选择器的 minDate

Question

我在同一页面中有两个 datePicker，我想根据第一个更改第二个 datepicker 的 minDate。这是我的代码：

$("#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
          })
             }
});

但是我有一个问题，第一次在第一个datePicker中选择一个日期，第二个的minDate会按照这个设置，但是当我重新选择第一个时，第二个datePicker的minDate就不会再改变了，它会保持。我不知道为什么。请帮忙！！

我只是希望第二个的 minDate 只要第一个的选定日期发生变化就会改变。

Answer 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});
      }
});

Answer 2

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'

}); 

Answer 3

$("#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();
 }

});