javascript - 如何用实际日期填充数组并用-1填充所有剩余日期

Question

我正在尝试填充 firstDay(6) 中的所有数组位置至numberOfDaysInAMonth(29)值介于 [ 1 之间和numberOfDaysInAMonth(29) ]。并用 -1 来休息所有位置

目前我的值来自firstDay从6开始，应该是从1开始至numberOfDaysInAMonth

我期望输出如下所示:

[-1,-1,-1,-1,-1,-1,1....29,-1,-1,-1,-1,-1,-1,-1] // 6(-1) and at end 7(-1)

相对于:

[-1,-1,-1,-1,-1,-1,6....28,-1,-1,-1,-1,-1,-1,-1]

我这样做是为了构建任何给定月份和年份的日历。

我的期望:最好、最简单的方法或算法

问题:您可以看到日期从正确的位置开始 6值错误 6 (应该是 1 直到 29 )。

为了更好地查看，我创建了 codepen:https://codepen.io/eabangalore/pen/ExVgrjB (您可以看到日期从正确的位置开始，但值错误 6 它应该是 1 直到 29 )

var allDates = Array(42).fill(-1,0);

var firstDay = (new Date('2020', 1)).getDay(); //6, from where our actual dates will start

var numberOfDaysInAMonth = 32 - new Date(2020, 1, 32).getDate(); //feburary

console.log(numberOfDaysInAMonth); //it should fill till numberOfDaysInAMonth

for(var i = firstDay; i < numberOfDaysInAMonth; i++ ){
    allDates[i] = i;
}

console.log(allDates);

/* 
 **   Display code below
 **
*/

//then i will display them like below
var datetemplate = '', finalTableTemplate = '';
for(var i = 1; i <= allDates.length; i++){
   var notAvailableDateClass = '';
   if(allDates[i] == -1 || allDates[i] == undefined)
          notAvailableDateClass = 'disabled';
     datetemplate += '<span class="'+notAvailableDateClass+'">'+allDates[i]+'</span>';
   if((i % 7) == 0 ){ finalTableTemplate += '<div>'+datetemplate+'</div>'; datetemplate = '';}
}
document.querySelector('#dates').innerHTML = finalTableTemplate;

span{
    display: inline-block;
    width: 38px;
    height: 29px;
    background: red;
    color: #fff;
    margin: 1px;
    text-align: center;
    line-height: 30px;
}

span.disabled {
    background: #ccc;
    color: #000;
}

<div id="dates"></div>

Answer 1

试试这个代码。

// Month counts from 0
var firstDay = new Date(2020, 1, 1).getDay(),
    daysInMonth = new Date(2020, 2, 0).getDate();

// 42 add 1 to avoid 'undefined' if week starts from Monday
var allDates = Array(43).fill(-1,0);
for (var i = 0; i < daysInMonth; i++ ) {
    allDates[i+firstDay] = i+1;
}

// true: week starts from Monday
// false week starts from Sunday
var startFromMon = true;
let elmMonth = document.createDocumentFragment(),
    elmWeek = document.createElement('div');
let start = (startFromMon) ? 1 : 0,
    moder = (startFromMon) ? 0 : 6;
for (var i = start; i < allDates.length; i++) {
    let elmDay = document.createElement('span');
    elmDay.textContent = allDates[i];
    if (allDates[i] == -1)
        elmDay.setAttribute('class', 'disabled');
    elmWeek.appendChild(elmDay);
    if (i%7 == moder) {
        elmMonth.appendChild(elmWeek);
        elmWeek = document.createElement('div');
    }
}
document.querySelector('#dates').appendChild(elmMonth);

span{
    display: inline-block;
    width: 38px;
    height: 29px;
    background: red;
    color: #fff;
    margin: 1px;
    text-align: center;
    line-height: 30px;
}

span.disabled {
    background: #ccc;
    color: #000;
}

<div id="dates"></div>