JQuery：如何在范围内设置日期选择器开始日期答案

【问题标题】：JQuery: How to set datepicker starting date in rangeJQuery：如何在范围内设置日期选择器开始日期
【发布时间】：2019-06-22 08:45:31
【问题描述】：

我正在尝试设置 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: " - "
    })

【问题讨论】：

标签： javascript jquery date-range daterangepicker

【解决方案1】：

一种方法是使用与计算mindate 相同的技术来计算maxdate，然后将该最大日期值应用于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() 插件还允许您通过the number of days relative to today's date 指定minDate 和maxDate。这意味着您可以通过指定minDate 和maxDate 来获得与上图相同的结果，而无需计算mindate 和maxdate，如下所示：

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

【讨论】：

【解决方案2】：

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

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

所以你需要做的就是

minDate: -1,
maxDate: -7,

【讨论】：

【解决方案3】：

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

除非您需要对旧版浏览器的支持，否则我只能推荐使用 HTML5 而不是 jquery。

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/

【讨论】：