Question

我使用jqueryui datepicker有2个输入表单： 1.开始约会 2.结束日期

我想要的是，当我从“开始日期”中选择日期时，“结束日期”上的日期选择器仅显示“开始日期”之后的日期。因此它不会显示更长/更长的日期，然后显示“开始日期”。怎么做到这一点？

感谢

<input id="start" type="text">
<input id="end" type="text">
<script>
var myDate = '';
$(function(){
$('#start').datepicker({
onSelect: function(date){
myDate = $(this).val();
}
});
$('#end').datepicker({
minDate: myDate
});
});</script>

那是我的剧本，但不起作用。

Answer 1

检查jquery ui网站中的日期范围示例。检查此示例下的源代码。 http://jqueryui.com/demos/datepicker/#date-range

Answer 2

这是一个有趣且相当复杂的问题。你需要做一些事情。

必须根据相对的日期字段在加载时设置datepickers min和max。默认的最小值和最大值可以按如下方式完成：

一个。使用jQuery从date-fields获取predata
```
var initDateBegin = $('#beginField').val(),
    initDateEnd   = $('#endField').val();
    initDateBegin = new Date(initDateBegin);
    initDateEnd   = new Date(initDateEnd);
```
B中。然后我们可以使用datepicker minDate和maxDate选项将这些传递到Datepicker构造函数中：http://jqueryui.com/demos/datepicker/#option-minDate。但我们还需要一个偏移量，因此用户不会将开始和结束设置为同一日期。我使用date.js库来进行大量日期操作：http://www.datejs.com/
```
 $('#beginField').datePicker({ maxDate : initDateEnd.addDays(-1) });
 $('#endField').datePicker({ minDate : initDateBegin.addDays(1) });
```

接下来，我们需要使用日期选择器来更新彼此的限制。所以..

一个。我们需要在两个日期字段上设置一个监听器，以便在用户在Begin或End日期选择新日期后，相反的字段限制会更新。这真的应该在datepicker构造函数中完成（使用onClose方法http://jqueryui.com/demos/datepicker/#event-onClose），所以现在我们有这样的东西：

 $('#beginField').datePicker({ 
        maxDate : initDateEnd.addDays(-1),
        onClose : setMin
 });
 $('#endField').datePicker({ 
        minDate : initDateBegin.addDays(1),
        onClose : setMax
 });

B中。所以现在是时候设置实际上会改变每个选择器的最小值和最大值的函数

function setMin(newMinDate){
      //convert to date object
      newMinDate = new Date(newMinDate); 
      //set new min date on end datepicker
      $('#endField').datepicker('option', 'minDate', newMinDate.addDays(-1));                          
}

function setMax(newMaxDate){
      //convert to date object
      newMaxDate = new Date(newMaxDate); 
      //set new max date on begin datepicker
      $('#beginField').datepicker('option', 'maxDate', newMaxDate.addDays(1));                          
}

这至少应该指向正确的方向，但您可能需要考虑更多。

一个。是否有绝对最大值的最小值？例如，开始和结束时可选择的范围不得在将来，因此是今天的上限，并且不得在1990年之前，或1990年的下限。如果是这种情况，则必须添加系统中的其他捕获，以防止用户选择使绝对限制无效的日期。

B中。如果你想要移动支持？如果是这样，你将不得不使用移动设备的html5日期字段，而不是在桌面上使用html5日期字段（因为桌面浏览器可能内置了日期选择器）

℃。 jquery-ui datepicker不会阻止人们使用键盘键入日期并绕过日期选择器。所以你需要
- 阻止所有键盘输入，强制用户使用datepicker（keydown和preventDefault（）应该这样做。）
- 添加额外的脚本来解析手工类型的日期，从那里监管限制并将其翻译为在setMin和setMax函数中生效。这基本上可以重用于使用移动（非jquery-ui）版本，只要您在解析后不使用datepicker来更新相反的字段。最后解析手工日期是使用Date.js的另一个好理由，这真是一个很棒的脚本。

JQueryUI Datepicker事件

2 个答案: