当月第一天,和当月最后一天的获取方式...这个就确实比较扯了,但事实上它就要这样....

第一天

new Date(year, minth-1, 1)

最后一天

new Date(year, month,0)

(function () {
   var datepicker = {};
    datepicker.getMonthData = function (year,month) {
        var ret = [];
        if(!year || !month){
            var today = new Date();
            year = today.getFullYear();
            month = today.getMonth()+1;
        }
        var firstDay = new Date(year,month-1,1);
        var firstDayWeekDay = firstDay.getDay();
        if(firstDayWeekDay === 0)
            firstDayWeekDay = 7;

        var lastDayOfLastMonth = new Date(year,month-1,0);
        var lastDateOfLastMonth = lastDayOfLastMonth.getDate();

        var preMonthDayCount = firstDayWeekDay -1;

        var lastDay = new Date(year,month,0);
        var lastDate = lastDay.getDate();

        //利用循环查询到一周日期
        for( var i = 0; i<7*6; i++){
            var date = i+1 - preMonthDayCount;
            var showDate = date;
            var thisMonth = month;
            if(date <= 0){
                thisMonth = month +1;
                showDate = lastDateOfLastMonth +date;
            }else if(date > lastDate){
                thisMonth = month +1;
                showDate = showDate-lastDate;
            }if(thisMonth === 0)thisMonth = 12;
            if(thisMonth === 13) thisMonth = 1;

            ret.push({
               month:thisMonth,
               date:date,
                showDate:showDate
            });
        }
        return ret;
    };
   window.datepicker = datepicker;

})();

new Date(year, month-1, date)

月份需要减一

越界自动退位

getFullYear()/ getMonth()/  getDate()   /  getDay() [获取星期0到6]

当月第一天new Date(year, minth-1, 1)

当月最后一天new Date(year, month,0)

二、date.js

(function() { // 为了防止模块编写的时候污染外部环境，就会用匿名函数。
  let datepicker = {};
  datepicker.getMonthData = function(year, month) {
    let ret = [];
    if (!year && !month && month !==0) {
      let today = new Date();
      year = today.getFullYear();
      month = today.getMonth() + 1;
    }
    let firstDay = new Date(year, month - 1, 1);
    let firstDayWeekDay = firstDay.getDay();
    if (firstDayWeekDay === 0) {
      firstDayWeekDay = 7;
    }
    year = firstDay.getFullYear(); // 哪年
    month = firstDay.getMonth() + 1; // 哪月
    let lastDayOfLastMoth = new Date(year, month - 1, 0); // 上个月最后一天
    let lastDateOfLastMonth = lastDayOfLastMoth.getDate(); // 上个月最后一天是几号
    let preMonthDayCount = firstDayWeekDay - 1; // 上个月最后一天是星期几
    let lastDay = new Date(year, month, 0); // 这个月最后一天
    let lastDate = lastDay.getDate(); // 这个月最后一天是几号
    for (let i = 0; i < 7*6; i++) {
      let date = i - preMonthDayCount + 1; // 距离上个月最后一天多长时间（单位：天）
      let showDate = date;
      let thisMonth = month;
      if (date <= 0) {
        // 上一月
        thisMonth = month - 1; // 上个月月份
        showDate = lastDateOfLastMonth + date; // 上个月日期
      } else if (date > lastDate) {
        // 下一月
        thisMonth = month + 1; // 下个月月份
        showDate = showDate - lastDate; // 下个月日期
      }
      // if (thisMonth === 0) {
      //   thisMonth = 12;
      // }
      // if (thisMonth === 13) {
      //   thisMonth = 1;
      // }
      thisMonth = thisMonth === 0 ? 12 :thisMonth === 13 ? 1 : thisMonth;
      ret.push({
        month: thisMonth,
        date: date,
        showDate: showDate
      });
    }
    return {
      year: year,
      month: month,
      days: ret
    };
  };
  window.datePicker = datepicker;
})();

三、main.js

(function() {
  let datePicker = window.datePicker;
  let monthData;
  let $wrapper;
  datePicker.buildUi = function(year, month) {
    monthData = datePicker.getMonthData(year, month);
    let html = '<div class="ui-datepicker-head">'+
      '<a class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>'+
      ' <a class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>'+
    ' <span class="ui-datepicker-curr-month">' + monthData.year + '- ' + monthData.month + '</span>'+
    ' </div>'+
    ' <div class="ui-datepicker-body">'+
    ' <table>'+
    ' <thead>'+
    '  <tr>'+
      '<th>一</th>'+
      ' <th>二</th>'+
    ' <th>三</th>'+
    '<th>四</th>'+
    '<th>五</th>'+
    ' <th>六</th>'+
    ' <th>七</th>'+
   '   </tr>'+
      '</thead>'+
     ' <tbody>';
    for (let i = 0; i < monthData.days.length; i++) {
      let date = monthData.days[i];
      if (i % 7 === 0) {
        html += '<tr>';
      }
      html += '<td data-date="' + date.date + '">' + date.showDate + '</td>';
      if (i % 7 === 6) {
        html += '</tr>';
      }
    }
    html += '</tbody>' +
        '</table>' +
        '</div>';
    return html;
  };
  datePicker.render = function(direction) {
    let year,month;
    if (monthData) {
      year = monthData.year;
      month = monthData.month;
    }
    if (direction === 'prev') {
      month--;
    }
    if (direction === 'next') {
      month++;
    }
    let html = datePicker.buildUi(year, month);
    $wrapper = document.querySelector('.ui-datepicker-wrapper');
    if (!$wrapper) {
      $wrapper = document.createElement('div');
      document.body.appendChild($wrapper);
      $wrapper.className = 'ui-datepicker-wrapper';
    }
    $wrapper.innerHTML = html;
  };
  datePicker.init = function($dom) {
    datePicker.render();
    let $input = document.querySelector($dom);
    let isOpen = false;
    // $dom点击后,日历显示出来，日历位置适应。
    $input.addEventListener('click', function() {
      if (isOpen) {
        $wrapper.classList.remove('ui-datepicker-wrapper-show');
        isOpen = false;
      } else {
        $wrapper.classList.add('ui-datepicker-wrapper-show');
        let left = $input.offsetLeft;
        let top = $input.offsetTop;
        let height = $input.offsetHeight;
        $wrapper.style.top = top + height + 2 + 'px';
        $wrapper.style.left = left + 'px';
        isOpen = true;
      }
    }, false);
    // $wrapper.querySelector('.ui-datepicker-btn').addEventListener();
    // 每次渲染完重新绑定事件
    // 为不变的元素绑定事件
    $wrapper.addEventListener('click', function(e) {
      let $target = e.target;
      // let containsBtn = $target.classList.contains('ui-datepicker-btn');
      if (!$target.classList.contains('ui-datepicker-btn')) {
        return;
      }
      if ($target.classList.contains('ui-datepicker-prev-btn')) {
        datePicker.render('prev');
      } else if ($target.classList.contains('ui-datepicker-next-btn')) {
        datePicker.render('next');
      }
    }, false);
    $wrapper.addEventListener('click', function(e) {
      let $target = e.target;
      if ($target.tagName.toLowerCase() !== 'td') {
        return;
      }
      let date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);
      $input.value = format(date);
      $wrapper.classList.remove('ui-datepicker-wrapper-show');
      isOpen = false;
    })
  }
  function format(date) {
    let ret = '';
    let shuffle = function(num) {
      if (num <= 9) {
        return `0${num}`;
      }
      return num;
    };
    ret += date.getFullYear() + '-';
    ret += shuffle(date.getMonth() + 1) + '-';
    ret += shuffle(date.getDate());
    return ret;
  }
})();

一、优化方向：

1、如何在移动端使用这个组件。

2、页面定位比较复杂时，如何处理弹出框的位置。

3、如何让上一个月，下一个月，使用不同的样式。

4、如何让某些日期可点，某些日期不可点。

一、<a href=""> 写了href，但是里面没有赋值，导致点击a链接会重新刷新页面，一直不能跳转到上一个月。这个bug找了很久。

一、为了防止模块编写的时候污染环境，就会用匿名函数。

一、日期对象：new Date(year, month-1, date)

1、月份需要-1.

2、越界自动进（退）位

3、getFullYear() / getMonth() / getDate()

4、getYear()：当前年距离1900年多少年。

5、getDay()：当前日期是周几

二、日期

1、当月第一天：new Date(year, month-1, 1)。

2、当月最后一天：new Date(year, month, 0)。

3、星期一-星期天[1, 2, 3, 4, 5, 6, 0]

一、webstorm：从1到10递增快捷键：li{$}*10

一、日历制作过程

1、静态结构编写。

2、日历数据。

3、数据渲染。

4、事件处理。

当月第一天，最后一天

cursor:pointer;是鼠标指针移上去显示手形状