jquery ui datepicker range clear value based on another selected value答案

【问题标题】：jquery ui datepicker range clear value based on another selected valuejquery ui datepicker range clear value based on another selected value
【发布时间】：2019-07-08 17:16:55
【问题描述】：

我将以下文章 (jquery ui date range 15 day between two date) 中使用的 JQuery UI 日期选择器范围用于我的表单，它运行良好，问题是我有另一个下拉列表列，我想清除日期列中的 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" />

【问题讨论】：

欢迎来到 Stack Overflow。在您的示例中，我没有看到此 Select 下拉菜单。请提供一个最小、完整和可验证的示例：stackoverflow.com/help/mcve

标签： javascript jquery jquery-ui datepicker date-range

【解决方案1】：

这样的？更改触发事件

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

【讨论】：

所以，在（更改时）我应该添加下拉 ID 的位置。因为我需要清除 txtTo 值。并禁用它。

【解决方案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" />

最大日期

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

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

以这种方式设置最大日期更容易一些，代码略少。

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：