Javascript:日期排班功能实现

背景：
需求的排班日期长短不一：有些是两周，有些是四周；要求选中的时候有一个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) > 9 ? d.getMonth() + 1 : ‘0’ + (d.getMonth() + 1);
  var d = d.getDate() > 9 ? 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 += ‘’ + dateToDay(item[i]) + ‘’
  }
  tableTh = ‘’ + tableTh + ‘’;
  //firstWeek
  for (var j = 0; j < item.length; j++) {
  if (j === 0) {
  tableTd += ‘今天’;
  } else {
  tableTd += ‘’ + new Date(item[j]).getDate() + ‘’;
  }
  }
  tableTd = ‘’ + tableTd + ‘’;
  tableTdArr[index] = tableTd;
  tableTd = ‘’;
  } else {
  for (var k = 0; k < item.length; k++) {
  tableTd += ‘’ + new Date(item[k]).getDate() + ‘’;
  }
  tableTd = ‘’ + tableTd + ‘’;
  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’);

-------------------------------- 间隔线 --------------------------------

另一个如下图所示的排班：

要求：星期title固定；指定月份第一天如果不是周一，则前面置空；最后一天如果不是周日，则后面置空；已经排版的日期，加一个激活态（active），点击可以查看具体时间（如：2019-2-14）
实现：

/*
* 获取当天及之后的排班时间
* @param month:指定的月份
* @param dayCount:相对于今天的天数，形如：0,1,2…
*/
function getDateData(month, dayCount) {
let yy, mm, dd;
let d = new Date();
let initDay = d.getFullYear() + ‘-’ + month + ‘-01’;
d = new Date(initDay);
d.setDate(d.getDate() + dayCount);
yy = d.getFullYear();
mm = (d.getMonth() + 1) > 9 ? d.getMonth() + 1 : ‘0’ + (d.getMonth() + 1);
dd = d.getDate() > 9 ? d.getDate() : ‘0’ + d.getDate();
return yy + “-” + mm + “-” + dd;
}

  /*
   * 根据月份查询排班结果
   * @param month: 指定月份，整型数字1-12
   */

  function schedueByMonth(month) {
      let dates = [],
          weekData = [],
          weekDataFinal = [],
          d, m, w, weekNum, lastWeek, lastWeekDiff = [];
      let formatMonth = month > 9 ? month : '0' + month;
      for (let i = 0; i <= 31; i++) {
          d = getDateData(formatMonth, i);
          m = new Date(d).getMonth() + 1;
          if (m === month) {
              dates.push(d)
          }
      }
      w = new Date(dates[0]).getDay();
      if (w > 0) {
          for (let j = 0; j < w - 1; j++) {
              dates.unshift('')
          }
      } else if (w === 0) {
          for (let j = 0; j < 6; j++) {
              dates.unshift('')
          }
      }
      //dates分组:每组7天
      for (let i = 0; i < dates.length; i = i + 7) {
          weekDataFinal.push(dates.slice(i, i + 7));
      }
      //最后一行不够7个，则补齐
      lastWeek = weekDataFinal[weekDataFinal.length - 1];
      if (lastWeek.length < 7) {
          for (let k = 0; k < (7 - lastWeek.length); k++) {
              lastWeekDiff.push('')
          }
          lastWeek = lastWeek.concat(lastWeekDiff)
          weekDataFinal[weekDataFinal.length - 1] = lastWeek;
      }
      pendingWeekData(dates, weekDataFinal)
  }

  function pendingWeekData(dates, weekDataFinal) {
      let weekTitles = '<tr><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr>';
      let scheduDom = '',
          weeksDom = '',
          weekDom = '';
      weekDataFinal.forEach(function(item) {
          item.forEach(function(subItem) {
              weekDom += '<td attr-date="' + subItem + '">' + delWithDay(subItem) + '</td>';
          })
          weeksDom += '<tr>' + weekDom + '</tr>';
          weekDom = '';
      })
      scheduDom = weekTitles + weeksDom;
      $('#schedue').html(scheduDom);

      //加入业务数据
      let date = ['2019-12-07', '2019-12-12', '2019-12-31']; //date为接口返回的排班时间,形如：['2019-12-07', '2019-12-12', '2019-12-28']
      delWithSchedue(dates, date)
  }

  function delWithSchedue(dates, date) {
      let pesoDates = date; //date为接口返回的排班时间
      let index;
      if (pesoDates.length > 0) {
          pesoDates.forEach(function(item, index) {
              index = dates.indexOf(item)
              $('#schedue').find('td').eq(index + 7).addClass('active').click(function() {
                  alert($(this).attr('attr-date'))
              })
          })
      }
  }

  function delWithDay(day) {
      if (day) {
          return new Date(day).getDate()
      } else {
          return ''
      }
  }
  //调用实例
  schedueByMonth(12)