jQuery 日期选择器限制从到

Question

When the from-date is picked I want that there is just the possibility of 3-7 days for the to-date.所以从-到应该是 min 3 days 和 max 7 days。我该怎么做？

 $(function() {
  $.datepicker.setDefaults({minDate: 0, changeMonth: true, numberOfMonths: 1});
  $('#datepicker').datepicker({onSelect: function(selectedDate) {
        $('#datepicker').datepicker('option', 'minDate', selectedDate);
        setTimeout(function() { $('#datepicker1').focus(); }, 0);
  }});
  $('#datepicker1').datepicker({onSelect: function(selectedDate) {
        $('#datepicker1').datepicker('option', 'maxDate', selectedDate);
  }});
});

Answer 1

the from-to should be min 3 days and max 7 days

在第一个日期选择器中选择日期时，需要设置另一个日期选择器的minDate和maxDate。这一点，正如您正确地理解的那样，需要在 onSelect 事件处理程序中完成。

但是，请注意传递给 onSelect 的参数是字符串。因此，如果您只是使用 getDate 提取日期并使用它来定义 3 到 7 天的范围，那会更好更容易。

这是一个例子：

$("#fromDate").datepicker({ 
    dateFormat: "yy-mm-dd", 
    onSelect: function() {

        // define a range object
        var dateRange = {min:null, max:null}, 

        // get the selected date from the first datepicker
            selectedDate = $('#fromDate').datepicker('getDate');

        dateRange.min = selectedDate.getDate() + 3; // add 3 days for min
        dateRange.max = selectedDate.getDate() + 7; // add 7 days for max

        // assign min and max to minDate and maxDate of second datepicker
        $('#toDate').datepicker('option', 'minDate', dateRange.min);
        $('#toDate').datepicker('option', 'maxDate', dateRange.max);

        // set the focus to the second datepicker
        setTimeout(function() { $('#toDate').focus(); }, 0);
    }
});

Fiddle: http://jsfiddle.net/abhitalks/ryhkkap3/

片段：

$("#fromDate").datepicker({ 
    dateFormat: "yy-mm-dd", 
    onSelect: function() {
        var dateRange = {min:null, max:null},
         selectedDate = $('#fromDate').datepicker('getDate');
        dateRange.min = selectedDate.getDate() + 3;
        dateRange.max = selectedDate.getDate() + 7;
        $('#toDate').datepicker('option', 'minDate', dateRange.min);
        $('#toDate').datepicker('option', 'maxDate', dateRange.max);
        setTimeout(function() { $('#toDate').focus(); }, 0);
    }
});
$("#toDate").datepicker({ dateFormat: "yy-mm-dd" });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input id="fromDate" />
<input id="toDate" />

.

Answer 2

你可以像这样做一些简单的事情：

$('#datepicker').datepicker({onSelect: function(selectedDate) {
      var newToDateStart=new Date(selectedDate);//convert selectedDate to Date object
      newToDateStart.setDate(newToDateStart.getDate()+3) //todate start
      var newToDateEnd=new Date(selectedDate);
      newToDateEnd.setDate(newToDateEnd.getDate()+7);//todate end
      $('#datepicker1').datepicker('option', 'minDate', newToDateStart);
      $('#datepicker1').datepicker('option', 'maxDate', newToDateEnd);
      //set min and maxdate to datepicker1
      setTimeout(function() { $('#datepicker1').focus(); }, 0);
}});

DEMO HERE

jQuery 日期选择器限制从到

jQuery Datapicker limit from to

jquery

datapicker