如何在日期选择器/日历中包含过去一周的天数？答案

【问题标题】：How to include the days for the past week in a datepicker/calendar?如何在日期选择器/日历中包含过去一周的天数？
【发布时间】：2018-05-19 06:53:43
【问题描述】：

我正在尝试创建一个日期选择器，其标题格式具有缩写的日期以匹配日期编号。

当前月份有 31 天，打印出来的有 31 天，但是 12 月 1 日从上周五开始，我希望能够显示过去一周的天数或者只显示数字 1指 12 月 1 日在当天开始迭代，在这种情况下，1 应该在 F 下，如下图所示：

这是我想出的代码：

var currentMonthDays = [];
var monthDays = dateFns.eachDay(dateFns.startOfMonth(new Date()), dateFns.lastDayOfMonth(new Date()));

for(var day in monthDays){
  currentMonthDays.push(dateFns.format(monthDays[day], 'D'));
}

var numbers = document.querySelector('.picker-days');
for(var key in currentMonthDays){
  var htmlString = '<span class="picker-daysNumber">' + currentMonthDays[key] + '</span>';
    numbers.insertAdjacentHTML('beforeend', htmlString);
}

https://jsfiddle.net/cw5oyurp/3/

【问题讨论】：

如果你只是想创建一个日历，也许你可以参考jQuery UI - datepicker
我会，但这次我尽量不依赖 jQuery。

标签： javascript date datetime datepicker date-fns

【解决方案1】：

我不确定它是否有问题，我必须进一步检查，但这是我能够解决问题的方法。

首先，我得到了 12 月第一周的日期，然后我检查了第一周第一天和该月第一天之间的天数差异。

12 月第一周的第一天从 26 日星期日开始。 12 月 1 日是星期五。

天数相差 5 天，所以我只是将空值推送到 currentMonthDays 数组，到目前为止它正在工作。也许我会得到天数。

// organize the days in the calendar to be under the correct day abbreviation
var firstDayOfTheMonth = new Date(this.currentMonthDays.original[0]);
var monthWeekStartedOn = startOfWeek(new Date(this.currentMonthDays.original[0]));
var dayDiff = differenceInDays(firstDayOfTheMonth, monthWeekStartedOn);
for(var i = 0; i < dayDiff; i++){
    this.currentMonthDays.formatted.unshift(' ')[i];
}

console.log(this.currentMonthDays);

【讨论】：