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

Question

我将以下文章中使用的JQuery UI datepicker范围（ jquery ui日期范围介于两个日期之间的15天 ）用于我的表单，它运行良好，问题是我还有另一个下拉列表列，我想清除其中的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

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

来自： http : //api.jqueryui.com/datepicker/-内含完整的帮助。

这样可以更方便地设置最大日期，而代码则要少一些。

希望这可以帮助。

Answer 3

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