Javascript:日期排班功能實現

標籤：src   listen   classlist   init   size   rem   wow   taf   inf   

 

 背景：

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

 需求的排班日期長短不一：有些是兩周，有些是四周；要求選中的時候有一個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:日期排班功能實現