如何在日期选择器上禁用当前星期之后的日期

Question

我正在创建一个日期选择器，该日期选择器仅允许您在当前日期之后48小时内选择当前星期中的日期。

我已经创建了日期选择器，它将在当前日期的48小时后开始选择日期。

var hours = 1728e5;
  var minDate = new Date(Date.now() + hours); 
  minDate.setDate(minDate.getDate());
  var datepick = $(".datepicker");
  datepick.datepicker('setDate', "");
  datepick.datepicker('option', 'minDate', minDate);

我希望有一个日期选择器，该选择器只能在从当前日期开始48小时后选择当前星期中的一个日期。因此，应禁用48小时后当前日期之前的日期和本周之后的日期。

Answer 1

解决方案1：使用Moment.js

moment.js的实现将以最少的代码行来呈现最准确的结果。从那里，只需将剩余天数作为maxDate插入：

Date: <input type="text" id="datepicker">

// get number of days remaining in the week with moment.js
// the number 6 represents Saturday, our last day of the week
var daysTillWeekOver = 6 - moment().day();

// set max date variable
var dateMax = `+${daysTillWeekOver}d`;

// set min date variable
var hours = 1728e5;
var dateMin = new Date(Date.now() + hours); 
dateMin.setDate(dateMin.getDate());

// activate datepicker
$("#datepicker").datepicker({
  minDate: dateMin,
  maxDate: dateMax
});

这是一支工作笔：https://codepen.io/grantnoe/pen/byaxEM

Moment.js：https://momentjs.com

jQuery UI Datepicker maxDate：https://api.jqueryui.com/datepicker/#option-maxDate

解决方案2：没有Moment.js

如果您反对使用moment.js，则可以使用以下（较少“保证”）方法：

var date = new Date();
var weekday = date.getDay();
var remainder = 6 - weekday;
document.getElementById("remainder").innerHTML = remainder;

<p>There are <span id="remainder"></span> days remaining in the week, not including today.</p>

如果使用此方法，则您的javascript如下所示：

// get number of days remaining in the week
var date = new Date();
var weekday = date.getDay();
var daysTillWeekOver = 6 - weekday;

// set max date variable
var dateMax = `+${daysTillWeekOver}d`;

// set min date variable
var hours = 1728e5;
var dateMin = new Date(Date.now() + hours); 
dateMin.setDate(dateMin.getDate());

// activate datepicker
$("#datepicker").datepicker({
  minDate: dateMin,
  maxDate: dateMax
});