JQueryUI Datepicker Event

Question

我有 2 个使用 jqueryui 日期选择器的输入表单：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

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

日期

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

   A. 使用 jQuery 从日期字段中获取预数据

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

   二.然后，我们可以使用日期选择器minDate和maxDate选项将它们传递给日期选择器构造函数：http://jqueryui.com/demos/datepicker/#option-minDate。但我们还需要一个偏移量，以便用户不会将开始和结束设置为同一日期。我使用日期.js库时，它需要大量的日期操作：http://www.datejs.com/

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

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

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

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

   二.所以现在是时候设置函数了，这些函数实际上会改变每个选择器的最小值和最大值

   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. 这至少应该为您指明正确的方向，但您可能需要考虑更多。

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

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

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

   • 阻止键盘输入，强制用户使用日期选择器（键和 preventDefault（） 应该这样做。

   • 添加其他脚本以考虑解析手动键入的日期，从那里控制限制并将其转换为在 setMin 和 setMax 函数中生效。这基本上可以重用于移动（非jquery-ui）版本，只要您在解析后不使用日期选择器来更新相反的字段。最后，解析手动键入的日期是使用 Date.js 的另一个很好的理由，这确实是一个很棒的脚本。

祝你好运！