设计思路

• 日期选择器,单个View 一共有42个元素 当月的日期 以及 前后月份的部分日期
• 月份选择器 这个简单 一年一共12个月
• 年份选择器 这个需要根据当前年份 前后生成一系列的年份

日期选择器大致实现思路

当我们需要选择日期的时候，也就是日期选择器出现的时候，我们需要展示当前时间（年月日）的月历视图，所以我们可以根据当前时间来对日历初始化数据来入手。

固定的部分

1. 一周有7天

2. 一年有12个月

3. 1,3,5,7,8,10,12 每月31天，2月 28或29(闰年) 其余的30天

变化部分

1. 当前日历卡中的数据

2. 当前时间 年份 可选择范围

综上我们可以先设计固定部分的实现

固定部分实现

   //星期数组

  var weeks = ["日", "一", "二", "三", "四", "五", "六",];

   //当前年份中每个月的天数

  var dayCountOfMonth = [31, 28 + util.isLeapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  //一年中月份组数

  var monthCount = 12;

变化部分实现*

当前日历卡数据实现，这里实现比较简单 按照 6行 7列来设计，这样既能保证当前月份 Day的数量能够完全显示出来，也方便我们去渲染数据，不用费力去用空格来控制。首先我们取出每月的第一天对应的星期然后记录下来

，根据每月第一天的对应的星期，来填充当前月日历卡的数据 例如：当前月第一天对应的日期是星期二 ， 那么就需要在当前日历卡数据中 填充 1个上个月最后一天的数据 + 当前月的总数据 + 下个月 (42 – 现有数据)

initMontData: function (dayCountOfMounth, weeksOfTheFirstDayOfEachMonth) {

      var currentYearMonthData = [];

      const cdate = this.data.calenderData.date;

      const lastYearDate = new Date();

      lastYearDate.setFullYear(this.data.calenderData.year - 1);

      var lastYearData = this.initData(lastYearDate);

      var nextYearDate = new Date();

      nextYearDate.setFullYear(this.data.calenderData.year + 1);

      var nextYearData = this.initData(nextYearDate);

      for (var i = 0; i < 12; i++) {

        var currentMonthDayCount = dayCountOfMounth[i];

        var firstDayWeek = weeksOfTheFirstDayOfEachMonth[i];

        var startIndex = firstDayWeek;

        var endIndex = firstDayWeek + dayCountOfMounth[i] - 1;

        var startArray = [];

        var endArray = [];

        var ddd = new Date();

        var cdaycount = dayCountOfMounth[i - 1];

        if (i === 0) {

          ddd.setFullYear(this.data.calenderData.year - 1);;

          ddd.setMonth(11);

          cdaycount = lastYearData.dayCountOfMonth[11];

        } else {

          ddd.setMonth(i - 1);

          cdaycount = dayCountOfMounth[i - 1];

        }

        for (var x = startIndex; x > 0; x--) {

          var temd = new Date();

          temd.setFullYear(ddd.getFullYear());

          temd.setMonth(ddd.getMonth());

          temd.setDate(cdaycount - x + 1)

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: true,

            str: str

          };

          startArray.push(itemh);

        }

        for (var x = 0; x < (42 - endIndex) - 1; x++) {

          var temd = new Date();

          if (i === 11) {

            temd.setFullYear(this.data.calenderData.year + 1);

            temd.setMonth(0);

          } else {

            temd.setFullYear(this.data.calenderData.year);

            temd.setMonth(i + 1);

          }

          temd.setDate(x + 1);

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: true,

            str: str

          };

          endArray.push(itemh);

        }

        var earchMontData = [];

        for (var j = 0; j < startArray.length; j++) {

          earchMontData.push(startArray[j]);

        }

        for (var j = 0; j < currentMonthDayCount; j++) {

          let temd = new Date();

          temd.setFullYear(this.data.calenderData.year);

          temd.setMonth(i);

          temd.setDate(j + 1);

          var str = util.simpleFormatTime(temd);

          var itemh = {

            date: temd,

            day: temd.getDate(),

            gray: false,

            str: str

          };

          earchMontData.push(itemh);

        }

        for (var j = 0; j < endArray.length; j++) {

          earchMontData.push(endArray[j]);

        }

        currentYearMonthData.push(earchMontData);

      }

      return currentYearMonthData;

    }