背景：

近期，公司的產品經常會遇到日期排班類似的功能；

需求的排班日期長短不一：有些是兩周，有些是四周；要求選中的時候有一個active的狀態區分，另外要提供鉤子獲取選中日期的形如：【2018-04-11】這種格式的數據。

實現：

        
        /*
         * 獲取當天及之後的排班時間
         * @param dayCount:相對於今天的天數，形如：0,1,2.......
         */
        function getDateData(dayCount) {
            var d = new Date();
            d.setDate(d.getDate() + dayCount);
            var y = d.getFullYear();
            var m = (d.getMonth() + 1) > 10 ? d.getMonth() + 1 : ‘0‘ + (d.getMonth() + 1);
            var d = d.getDate() > 10 ? d.getDate() : ‘0‘ + d.getDate();
            return y + "-" + m + "-" + d;
        }
        /*
         * 獲取日期對應的星期名稱
         * @param date:待轉換日期,形如：‘2018-04-11‘ 或 ‘2018-4-11‘
         */
        function dateToDay(date) {
            var dayNo = new Date(date).getDay();
            switch (dayNo) {
                case 0:
                    return ‘星期日‘;
                    break;
                case 1:
                    return ‘星期一‘;
                    break;
                case 2:
                    return ‘星期二‘;
                    break;
                case 3:
                    return ‘星期三‘;
                    break;
                case 4:
                    return ‘星期四‘;
                    break;
                case 5:
                    return ‘星期五‘;
                    break;
                case 6:
                    return ‘星期六‘;
                    break;
                default:
                    break;
            }
        }
        /*
         * 通過參數動態獲取排班日期
         * @param weekCount:排班周數，int型
         * @param domId: 輸出DomId
         */
        function initWeekData(weekCount, domId) {
            var weekDateTempl = ‘‘,
                tableTempl = ‘‘,
                tableTh = ‘‘,
                tableTd = ‘‘,
                tableTdArr = [],
                weekData = [],
                weekDataFinal = [],
                weekDateEle;
            for (var i = 0; i < weekCount * 7; i++) {
                weekData[i] = getDateData(i);
            }
            for (var i = 0; i < weekData.length; i = i + 7) {
                weekDataFinal.push(weekData.slice(i, i + 7));
            }
            weekDataFinal.forEach(function(item, index) {
                if (index === 0) {
                    for (var i = 0; i < item.length; i++) {
                        tableTh += ‘<th>‘ + dateToDay(item[i]) + ‘</th>‘
                    }
                    tableTh = ‘<tr>‘ + tableTh + ‘</tr>‘;
                    //firstWeek
                    for (var j = 0; j < item.length; j++) {
                        if (j === 0) {
                            tableTd += ‘<td attr-date=‘ + item[j] + ‘ class="active">今天</td>‘;
                        } else {
                            tableTd += ‘<td attr-date=‘ + item[j] + ‘>‘ + new Date(item[j]).getDate() + ‘</td>‘;
                        }
                    }
                    tableTd = ‘<tr>‘ + tableTd + ‘</tr>‘;
                    tableTdArr[index] = tableTd;
                    tableTd = ‘‘;
                } else {
                    for (var k = 0; k < item.length; k++) {
                        tableTd += ‘<td attr-date=‘ + item[k] + ‘>‘ + new Date(item[k]).getDate() + ‘</td>‘;
                    }
                    tableTd = ‘<tr>‘ + tableTd + ‘</tr>‘;
                    tableTdArr[index] = tableTd;
                    tableTd = ‘‘;
                }
            });
            tableTempl = tableTh + tableTdArr.join(‘‘);
            weekDateEle = document.querySelector(‘#‘ + domId);
            weekDateEle.innerHTML = tableTempl;
            weekDateEle.querySelectorAll(‘tr>td‘).forEach(function(item, index) {
                item.addEventListener("click", function() {
                    weekDateEle.querySelectorAll(‘tr>td‘).forEach(function(item, index) {
                        item.classList.remove(‘active‘);
                    });
                    this.classList.add(‘active‘);
                    alert(this.getAttribute(‘attr-date‘))
                });
            });
        }

調用實例：

   //調用實例
   initWeekData(2, ‘twoWeekDate‘);

   initWeekData(4, ‘fourWeekDate‘);

實現效果：

線上DEMO：

https://codepen.io/kevinInsight/pen/mxoOaz

Javascript:日期排班功能實現