微信小程序——日历

上下月的点击不写，懒，

第一步在data里面设置各种初始值，QJE的写法是为了，在后期迎合客户的要求，客户想展示城什么样子，就直接选择就好了，比在js里面写数组，取值，方便的多（后期哦），

data: { 
            defaultIndex:0,
            weekList:{
                  Q: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
                  J:['日','一','二','三','四','五','六'],
                  E: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
            },
            monthList:{
                  Q:['一月份','二月份','三月份','四月份','五月份','六月份','七月份','八月份','九月份','十月份','十一月份','十二月份'],
                  J: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'],
                  E: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
            },
            timeyear: '',
            prevmonth: '',
            nowmonth: '',
            nextmonth: '',
            monthLists: []
      },

第二步
做一些小准备
/数组如果小于10在前面加一个0

      numberT:function(num){
            if(num>10)
                  return num;
            else
            return num='0'+num;
      },

第三步。获取每个月的最大天数
如果闰年且二月，天数为29，如果平年且二月，天数为28
如果为大月天数为31小月30

 dayMax: function (year, month){
            var maxDay = 31;
            if (year % 4 == 0 && month == 2) {
                  maxDay = 29
            } else if (month == 2)
                  maxDay = 28;
            else if (month == 4 || month == 6 || month == 9 || month == 11)
                  maxDay = 30
            return maxDay;
      },

第四步

1. 获取当前年月日，时分秒，所在周几 从自定义的数组里面将获取到的数据改成自己想要的格式，
2. 顺便算上上下月上下年
3. 调用楼上方法算出当月天数
4. 如果参数里面年和月都存在，就调用楼上方法，算出指定月的最大天数，和指定月1号是周几，如果没有的话就是本月最大天数，以及本月1号是周几
5. 创建一个数组，把月份的每一天的所属年、月、日、周几，渲染到数组里面
6. 返回当前的年月，以及每一天

monthList: function (y, m) {
            var  date = new Date();
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            var hour = date.getHours()
            var minute = date.getMinutes()
            var second = date.getSeconds()
            var week_i = date.getDay()
            var fontwhite = true
            var week = this.data.weekList['Q'][week_i]
            var prevMonth = month > '01' ? month - 1 : 12
            var nextMonth = month < 12 ? month + 1 : '01'
            var prevYear = year - 1
            var nextYear = year + 1
            var dayMax = this.dayMax(year, month); //这个月最大天数
            var yearDay=year;
            var monthDay=month;
            if(y && m){
                  yearDay=y;
                  monthDay=m;
                  var dayMax_day = this.dayMax(y, m); //指定某月最大天数
                  var weekDate = new Date(y + '/' + m + '/1');
                  var weekDay=weekDate.getDay();
            }else {
            var dayMax_day=dayMax;
                  var weekDate = new Date(year + '/' + month + '/1');
                  var weekDay = weekDate.getDay();
            }
            var monthList=[]
            for(var i=1;i<=dayMax_day;i++){
                  monthList.push({
                        year:yearDay,
                        month:monthDay,
                        day:i,
                        week: this.data.weekList['E'][(weekDay + i - 1) % 7]
                  })
            }
            return {
                  today:{
                        year: year,
                        month: month,
                        day: day,
                        hour: hour,
                        minute: minute,
                        second: second,
                        week: week,
                        prevMonth: prevMonth,
                        nextMonth: nextMonth,
                        prevYear: prevYear,
                        nextYear: nextYear,
                        dayMax:dayMax
                  },
                  monthList:monthList
            };
      },

第五步，
在加载事件里面调用，把楼上的方法的return的值调用过来，赋值给Data,渲染到页面

onLoad: function(options) {
            var date=this.monthList();
            this.setData({
                  monthLists:date.monthList,
                  defaultIndex:date.today.day,
                  today:date.today,
                  nowmonth: this.data.monthList.E[date.today.month],
                  prevmonth: this.data.monthList.E[date.today.prevMonth],
                  nextmonth: this.data.monthList.E[date.today.nextMonth],
                  timeyear: date.today.year
            })
      },

好了，到这里基本的日历就出来了，关于日期的自动选中当前天数和点击选中别的day，并变成白色的问题，这里赠送一个答案
关于上下月的，懒，不写了，
这个组件的id，有defaultIndex，控制他的位置，盒子的样式，初始样式，如果defaultIndex=下标，则变成白色

            <scroll-view scroll-x="true" scroll-into-view="day-{{defaultIndex}}" scroll-with-animation="true" style="white-space: nowrap;">
                  <view class="scroll-view-item" wx:for="{{monthLists}}" wx:key="index" id="day-{{index}}">
                        <view class="littleBox {{defaultIndex==index?'yes':'no'}}" catchtap='riqiClick' data-index="{{index}}">
                              <text>  {{item.week}}</text>
                              <text>  {{item.day}}</text>
                        </view>
                  </view>
            </scroll-view>

事件部分
获取下标，赋值给defaultIndex，defaultIndex在data里面初始值为0，在onload里面为当天，

riqiClick(event) {
            var thisId = event.currentTarget.id;
            var _index=event.currentTarget.dataset.index;
            var list = this.data.monthLists;
            for (var i in list) {
                  if (i == thisId) {
                        list[i].fontwhite = true
                        console.log(list[i].fontwhite)
                  } else {
                        list[i].fontwhite = false
                  }
            }
            this.setData({
                  monthLists: list,
                  defaultIndex:_index
            })
      },