jquery ui datepicker范围基于另一个选定值清除值

Question

我使用以下文章（jquery ui date range 15 day between two date）中使用的JQuery UI datepicker范围作为我的表单，它运行正常，问题是我有另一个下拉列表列，我想在选择值时清除1日期列从下拉列表中。下面是我在文章中使用的代码：

$(function () {
    $("#txtFrom").datepicker({      
       onSelect: function(selectedDate) {
            //$("#cal4").datepicker("setDate", selectedDate);
            var date = $(this).datepicker("getDate"); 
            date.setDate(date.getDate() + 15);
            $("#txtTo").datepicker("setDate", date);
            $("#txtTo").datepicker("option", "minDate", selectedDate);
            $("#txtTo").datepicker("option", "maxDate", date);
        }
    });
    
    
  $("#txtTo").datepicker({
   changeMonth: true,
   changeYear: true
  })  
    
});

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<input type="text" id="txtFrom" />

<input type="text" id="txtTo" />

Answer 1

像这样的东西？在变化时触发事件

  $("#txtTo").datepicker({
   changeMonth: true,
   changeYear: true
  }).on( "change", function() {
   //add your code ref: txtFrom
  }),

Answer 2

这是一个可能有帮助的例子。我从<select>元素做了一个三向选择示例。该选择决定了可用的日期选择器。

$(function() {
  $("#txtFrom").datepicker({
    onSelect: function(selectedDate) {
      $("#txtTo").datepicker("option", {
        defaultDate: selectedDate,
        minDate: selectedDate,
        maxDate: "+15d"
      });
    }
  });

  $("#txtTo").datepicker({
    changeMonth: true,
    changeYear: true
  });

  $("#slctDate").change(function() {
    switch ($("option:selected", this).val()) {
      case "None":
        $("#txtFrom, #txtTo").val("").prop("disabled", true);
        break;
      case "Single":
        $("#txtFrom, #txtTo").prop("disabled", false);
        $("#txtTo").val("").prop("disabled", true);
        break;
      case "Range":
        $("#txtFrom, #txtTo").prop("disabled", false);
        break;
    }
  });

});

<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Pick Choice:
<select id="slctDate">
  <option></option>
  <option>None</option>
  <option>Single</option>
  <option>Range</option>
</select>
<br />
<input type="text" id="txtFrom" disabled="true" />
<input type="text" id="txtTo" disabled="true" />

MAXDATE

字符串：由dateFormat选项定义的格式的字符串，或相对日期。相对日期必须包含价值和期间对;有效期是"y"多年，"m"持续数月，"w"持续数周，"d"持续数天。例如，"+1m +7d"代表从今天起一个月零七天。

来自：http://api.jqueryui.com/datepicker/ - 充满了帮助。

用这种方式设置最大日期要容易一点，代码稍微少一些。

希望这可以帮助。

Answer 3

我通过在txtForm函数上添加On Change找到了解决方案。