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

Posted 2023-05-07

【中文标题】根据第一个更改第二个日期选择器的 minDate

【英文标题】：change the second datepicker's minDate depending the first one

【发布时间】：2012-09-19 21:49:32

【问题描述】：

我在同一页面中有两个 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 只要第一个的选定日期发生变化。

【问题讨论】：

请发布您的完整代码，如果可能，请发布 jsFiddle 示例。

你见过date range demo吗？这应该会有所帮助。

【参考方案1】：

您错误地更新了第二个datepicker。我假设您之前已经初始化了第二个，尽管您发布的代码似乎没有。更新时需要使用选项语法，而不是构造函数。

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

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

完整代码：

$('#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】：

您可以使用以下代码更新 secodn datepicker 的 Mindate：

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

);