javascript - jQuery Datepicker - 将第一个选择器设置为限制为第二个选择器的事件周

Question

两个日期选择器，工作人员要在日期选择器 1 (#from) 中输入工作日，然后在 (#to) 中输入第二个日期。相对于日期 1，日期 2 必须始终在未来。不允许周末。

此 fiddle 中提供了此工作示例，不包括周末，并且不允许日期 2 中的过去日期:

https://jsfiddle.net/gLrumpo3/6/

<input id="from">
<input id="to"> 

$("#from").datepicker({
    defaultDate: new Date(),
    minDate: new Date(),
    beforeShowDay: $.datepicker.noWeekends,
    onSelect: function(dateStr)
    {
        $("#to").val(dateStr);
        $("#to").datepicker("option",{ minDate: new Date(dateStr)})
    }
  });

$('#to').datepicker({
   defaultDate: new Date(),
   beforeShowDay: $.datepicker.noWeekends,
   onSelect: function(dateStr) {
     toDate = new Date(dateStr);
     fromDate = ConvertDateToShortDateString(fromDate);
     toDate = ConvertDateToShortDateString(toDate);
   }
 });

但我现在需要的是能够将输入的第二个日期“锁定”到与第一个日期相同的星期，我考虑过使用 maxDate，但我只能指定一个任意偏移量，例如 Xdays，或者具体日期。这不太好，因为人们可能会选择星期四，例如，我不能再添加 4 天并将其设置为最大日期，因为他们可以选择下周的星期一。

那么我如何才能将他们的日期限制在一周内，而该周是在第一个字段中选择的那一天设置的。

如果可能，请使用有效答案更新 fiddle 。谢谢。

Answer 1

试试这个代码

var date = $(this).datepicker('getDate');
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
$( "#to" ).datepicker("option",{minDate: new Date(dateStr), maxDate:endDate});

您可以为 $( "#to") 日期选择器将 maxDate 设置为该周的最后一个日期。

$("#from").datepicker({
  defaultDate: new Date(),
  minDate: new Date(),
  beforeShowDay: $.datepicker.noWeekends,
  onSelect: function(dateStr)
  {
      $("#to").val(dateStr);
      var date = $(this).datepicker('getDate');
         endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
      $( "#to" ).datepicker("option",{minDate: new Date(dateStr), maxDate:endDate});
      
  }
});

$('#to').datepicker({
  defaultDate: new Date(),
  beforeShowDay: $.datepicker.noWeekends,
  onSelect: function(dateStr) {
    toDate = new Date(dateStr);
    //fromDate = ConvertDateToShortDateString(fromDate);
    //toDate = ConvertDateToShortDateString(toDate);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input id="from">
<input id="to">