首页 文章

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

提问于
浏览 次
1

两个日期选择器，工作人员将工作日输入到datepicker 1（#from），然后输入第二个日期（#to） . 关于日期1，日期2必须始终在未来 . 不允许周末 .

在这个小提琴中可以找到这样的工作示例，不包括周末，并且不允许在日期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天并将其设置为最大日期，因为他们可以选择下周一的星期一 .

那么我怎样才能将他们的约会时间限制为一周，其中那一周在第一个字段中选择的那一天被设置为absed .

如果可能的话，请更新工作答案 . 谢谢 .

javascript jquery date jquery-ui datepicker

1 回答

  • 2

    Try this code

    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});

    您可以将 maxDate 设置为 $( "#to" ) datepicker的该周的最后日期 .

    $("#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">
    回复于

相关问题