jquery ui datepicker range clear value based on another selected value

Posted 2023-05-08

【中文标题】jquery 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 下拉菜单。请提供一个最小、完整和可验证的示例：***.com/help/mcve

【参考方案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 找到了解决方案。