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

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

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

Answer 2

minDate 和 maxDate 可以是从今天算起的天数。

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

所以你需要做的就是

minDate: -1,
maxDate: -7,

Answer 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/

JQuery: 如何在范围内设置日期选择器的开始日期

JQuery: How to set datepicker starting date in range

javascript

jquery

date-range

daterangepicker