1

我有 2 个使用 jqueryui datepicker 的输入表单：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>

那是我的脚本，但不工作。

4

2 回答 2

2

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

于 2012-08-12T05:56:45.967 回答
0

这是一个有趣且相当复杂的问题。你需要从几件事开始。

  1. 日期选择器最小值和最大值都必须根据相反的日期字段在加载时设置。这个默认的最小值和最大值可以按如下方式完成：

    A. 使用 jQuery 从日期字段中获取 predata

    var initDateBegin = $('#beginField').val(),
    initDateEnd   = $('#endField').val();
    initDateBegin = new Date(initDateBegin);
    initDateEnd   = new Date(initDateEnd);

    B. 然后我们可以使用 datepickerminDate和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) });

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

    A. 我们需要在两个日期字段上设置一个侦听器，以便用户在开始或结束日期选择新日期后，相对字段限制得到更新。这确实应该在 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));                          
}

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

    A. 是否有一个绝对的最大值和最小值来说明？比如，开头和结尾可以选择的范围不能在未来，所以上限是今天，不能在 1990 年之前，或者下限是 1990 年。如果是这种情况，则必须添加系统中的附加捕获，以防止用户选择使绝对限制无效的日期。

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

    C. jquery-ui 日期选择器不会阻止人们使用键盘输入日期并绕过日期选择器。所以你需要要么

    • 一起防止键盘输入，强制用户使用日期选择器（keydown 和 preventDefault() 应该这样做。）

    • 添加额外的脚本来解释手动输入的日期，从那里监管限制并翻译它以在 setMin 和 setMax 函数中生效。这基本上可以重用于移动（非 jquery-ui）版本，只要您在解析后不使用 datepicker 更新相反的字段。最后，解析手动输入的日期是使用 Date.js 的另一个好理由，这确实是一个很棒的脚本。

祝你好运！

于 2012-08-12T06:28:05.133 回答