jQuery的：如何设置范围内的日期选择器开始日期

Question

我正在尝试设置datepicker()的日期范围的开始和结束日期，其中范围的开始日期是过去7天，结束日期是昨天。

目前，我正在使用它，以便该范围的开始日期是过去的7天，但是我不知道如何将结束日期设置为昨天。

我已经尝试了以下方法，但是它无法正常工作：

var mindate = new Date();
    mindate.setDate(mindate.getDate() - 7);
    $('#date').datepicker({
        language: 'en',
            range : true,
            minDate : mindate,
            maxDate : new Date() - 1,   //I guess the problem is here
            multipleDates: true,
            multipleDatesSeparator: " - "
    })

Answer 1

一种方法是使用与计算maxdate相同的技术来计算mindate ，然后将该最大日期值应用于maxData datepicker()实例的maxData参数：

var mindate = new Date();
mindate.setDate(mindate.getDate() - 7);

/* Compute max date of "yesterday" using same method as 
min date */
var maxdate = new Date();
maxdate.setDate(maxdate.getDate() - 1);

$('#date').datepicker({
    language: 'en',
    range : true,
    minDate : mindate,
    maxDate : maxdate, /* Apply max date to date picker */
    multipleDates: true,
    multipleDatesSeparator: " - "
});

datepicker()插件还允许您通过相对于今天date的天数来指定minDate和maxDate 。 这意味着您可以通过指定minDate和maxDate来实现与上面所示相同的结果，而无需计算mindate和maxdate ，如下所示：

$('#date').datepicker({
    language: 'en',
    range : true,
    minDate : -7, /* 7 days ago */
    maxDate : -1, /* Yesterday */
    multipleDates: true,
    multipleDatesSeparator: " - "
});

Answer 2

minDate和maxDate可以是从今天开始的天数。

https://api.jqueryui.com/datepicker/#option-minDate

所以你要做的就是

minDate: -1,
maxDate: -7,

Answer 3

在HTML5中，您已经有一个<input type="date">因此您不需要任何类型的jQuery。

除非您需要对旧版浏览器的支持，否则我只能建议通过jquery使用HTML5。

的HTML

<input type="date" id="date">

香草JS

function getHtmlDateString(date) {
  var dd = date.getDate();
  var mm = date.getMonth()+1; //January is 0!
  var yyyy = date.getFullYear();
  if(dd<10){
    dd='0'+dd
  } 
  if(mm<10){
    mm='0'+mm
  } 

  return yyyy+'-'+mm+'-'+dd;
}

var min = new Date();
min.setDate(min.getDate()-7);
document.getElementById("date").setAttribute("min", getHtmlDateString(min));
var max = new Date();
max.setDate(max.getDate()-1);
document.getElementById("date").setAttribute("max", getHtmlDateString(max));

JSFiddle： https ：//jsfiddle.net/hmqe4sb6/