jquery - 如何在日期选择器上禁用当前一周之后的日期

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 小时后当前日期之前的日期和本周之后的日期。

标签： jquery

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