jQuery Datepicker - 设置第一个选择器以限制第二个选择器的活动周

Question

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

此小提琴中提供了此工作示例，不包括周末，并且不允许日期 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);
   }
 });

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

那么我怎样才能将他们的日期限制在一周内，该周设置在第一个字段的选定日期。

如果可能的话，请用有效的答案更新小提琴。谢谢。

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" ) datepicker，您可以将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">