weijinxiao/weijinxiao-WechatApp/component/datepick/datepick.js

// component/datepick/datepick.js
var Moment = require("moment.js");
var DATE_LIST = [];
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    phbname: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    indicatordots: false,
    pickindex: 1,
    maxMonth: 5,
    days: [],
    years: [],
    months: [
      [1, 2, 3, 4, 5, 6],
      [7, 8, 9, 10, 11, 12]
    ],
    phbs: [{
      name: '供应商排行榜',
      key: 1
    }, {
      name: '商品排行榜',
      key: 2
    }],
    phbindex: 0,
    weekStr: ['日', '一', '二', '三', '四', '五', '六'],
    stime: '',
    etime: '',
    isshow4: false,
    scrollinto: 'idaaa',
    dateList: [],
    firsttime: true
  },
  ready() {
    var _this = this;
    var si = wx.getStorageSync('systemInfo')
    if (si) {
      this.setData({
        systemInfo: si
      });
    } else {
      wx.getSystemInfo({
        success: function(res) {
          _this.setData({
            systemInfo: res

          });
          wx.setStorageSync('systemInfo', res)
        }
      })
    }
    this.inityear()
    this.initmonth()
    //console.log(this.properties.phbname)
    this.setData({
      phbname: this.properties.phbname
    })
    this.createDateListData()

  },

  /**
   * 组件的方法列表
   */
  methods: {
    siscroll(e) {
      this.createDateListData()
    },
    phbchange(e) {
      console.log(e.detail.value)
      this.setData({
        phbindex: e.detail.value
      })
      this.triggerEvent('typechange', {
        type: parseInt(e.detail.value) + 1
      }, {
        bubbles: false, //事件是否冒泡
        composed: false, //事件是否可以穿越组件边界
        capturePhase: false //事件是否拥有捕获阶段
      })
    },
    databack() {
      this.triggerEvent('click', {
        type: this.data.pickindex,
        day: this.data.nowday.toString().padStart(2, '0'),
        month: this.data.nowmonth.toString().padStart(2, '0'),
        year: this.data.nowyear,
        stime: this.data.stime,
        etime: this.data.etime
      }, {
        bubbles: false, //事件是否冒泡
        composed: false, //事件是否可以穿越组件边界
        capturePhase: false //事件是否拥有捕获阶段
      })
    },

    daysel(e) {
      this.setData({
        nowday: e.currentTarget.dataset.day
      })
      this.databack()
    },
    monthsel(e) {
      this.setData({
        nowmonth: e.currentTarget.dataset.month
      })
      this.initdays(1)
      this.databack()
    },
    yearsel(e) {
      this.setData({
        nowyear: e.currentTarget.dataset.year
      })
      this.databack()
    },
    initdays(kind) {
      var daynum = new Date(this.data.nowyear, this.data.nowmonth, 0).getDate()
      var nowday = new Date().getDate()
      var dayindex = 0
      var days = []
      for (var i = 1; i <= daynum; i++) {
        var x = parseInt(i / 7)
        if (!days[x]) {
          days[x] = []
        }
        if (i === nowday) {
          dayindex = x
        }
        days[x].push(i)
      }
      console.log(days)
      this.setData({
        days: days,
        nowday: nowday,
        dayindex: dayindex
      })
      if (!kind) {
        this.databack()
      }
    },

    initmonth() {
      this.setData({
        nowmonth: new Date().getMonth() + 1,
        monthindex: parseInt((new Date().getMonth() + 1) / 7)
      })
      this.initdays()
    },
    yearchange(e) {
      if (e.detail.current === 0) {
        this.addyears()
      }
    },

    addyears() {
      var years = this.data.years
      var firstyear = years.length > 0 ? years[1][0] : this.data.nowyear
      for (var i = 0; i < 4; i++) {
        var y = []
        for (var j = 0; j < 5; j++) {
          y.unshift(firstyear - (i * 5 + j))
        }
        years.unshift(y)
      }
      this.setData({
        years: years,
        yearindex: this.data.yearindex ? this.data.yearindex : years.length - 1
      })

    },
    inityear() {
      this.setData({
        nowyear: new Date().getFullYear()
      })
      this.addyears()
    },



    getTotalDayByMonth: function(year, month) {
      month = parseInt(month, 10);
      var d = new Date(year, month, 0);
      return d.getDate();
    },
    /*
     * 获取月的第一天是星期几
     */
    getWeek: function(year, month, day) {
      var d = new Date(year, month - 1, day);
      return d.getDay();
    },
    setindex(e) {
      var index = parseInt(e.currentTarget.dataset.index)
      this.setData({
        pickindex: index
      })
      if (index === 1 && this.data.nowday) {
        this.databack()
      }
      if (index === 2 && this.data.nowmonth) {
        this.databack()
      }
      if (index === 3 && this.data.nowyear) {
        this.databack()
      }
      if (index === 4 && this.data.stime && this.data.etime) {
        this.databack()
      }

    },
    hidetime() {
      this.setData({
        isshow4: false,
      })
    },
    setime() {

      this.setData({

        isshow4: true,
      })
      this.freshPressStyle()
      if (this.data.firsttime) {
        var now = new Date();
        this.setData({
          scrollinto: 'idaaa',
          firsttime: false
        })
      }
      if (this.data.stime) {
        var st = this.data.stime.split('-')
        this.renderPressStyle(st[0], parseInt(st[1]), parseInt(st[2]), true)
      }
      if (this.data.etime) {
        var st = this.data.etime.split('-')
        this.renderPressStyle(st[0], parseInt(st[1]), parseInt(st[2]), false)
      }
    },
    onPressDate: function(e) {
      var {
        year,
        month,
        day
      } = e.currentTarget.dataset;
      //当前选择的日期为同一个月并小于今天，或者点击了空白处（即day<0），不执行
      // if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0) return;
      this.freshPressStyle()
      var tempMonth = month;
      var tempDay = day;

      if (month < 10) tempMonth = '0' + month
      if (day < 10) tempDay = '0' + day

      var date = year + '-' + tempMonth + '-' + tempDay;

      if (this.data.markcheckInDate) {
        if (date < this.data.checkInDate) {
          wx.showToast({
            title: '返程日期不能早于出发日期',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.setData({
          checkOutDate: date,
          markcheckInDate: false,
          dateList: DATE_LIST.concat()
        })
      } else {
        this.setData({
          checkInDate: date,
          markcheckInDate: true,
          dateList: DATE_LIST.concat()
        });
      }

      //设缓存，返回页面时，可在onShow时获取缓存起来的日期
      wx.setStorage({
        key: 'ROOM_SOURCE_DATE',
        data: {
          checkInDate: this.data.checkInDate,
          checkOutDate: this.data.checkOutDate
        }
      });
      // wx.navigateBack({
      //   delta: 1, // 回退前 delta(默认为1) 页面
      // });
      this.renderPressStyle(year, month, day, this.data.markcheckInDate);
      if (!this.data.markcheckInDate) {
        this.setData({
          stime: this.data.checkInDate,
          etime: this.data.checkOutDate,
          isshow4: false,
          pickindex: 4
        })
        this.databack()
      }

    },
    freshPressStyle() {
      var dateList = this.data.dateList;
      //渲染点击样式
      for (var i = 0; i < dateList.length; i++) {
        var dateItem = dateList[i];

        var days = dateItem.days;
        for (var j = 0; j < days.length; j++) {
          days[j].class = days[j].class.split(' ')[0]
          delete days[j].inday
          delete days[j].outday
        }

      }
      this.setData({
        dateList: dateList
      });
    },
    renderPressStyle: function(year, month, day, inorout) {
      var dateList = this.data.dateList;
      //渲染点击样式
      for (var i = 0; i < dateList.length; i++) {
        var dateItem = dateList[i];
        var id = dateItem.id;
        if (id === year + '-' + month) {
          var days = dateItem.days;
          for (var j = 0; j < days.length; j++) {
            // if (days[j].day >= day) {
            //   days[j].class = days[j].class + ' bgitem';
            // } else {
            //   days[j].class = ''
            // }
            var tempDay = days[j].day;
            if (tempDay == day) {
              days[j].class = days[j].class + ' active';
              if (inorout) {
                days[j].inday = true;
              } else {
                days[j].outday = true;
              }
              break;
            }
          }
          break;
        }
      }
      this.setData({
        dateList: dateList
      });
    },
    createDateListData: function() {
      wx.showLoading({
        title: '',
      })
      var dateList = this.data.dateList;
      var now
      var scrollid = ''
      /*
      设置日期为 年-月-01,否则可能会出现跨月的问题
      比如：2017-01-31为now ,月份直接+1（now.setMonth(now.getMonth()+1)），则会直接跳到跳到2017-03-03月份.
        原因是由于2月份没有31号，顺推下去变成了了03-03
    */
      if (dateList.length == 0) {
        now = new Date();
        now = new Date(now.getFullYear(), now.getMonth(), 1);
      } else {
        now = new Date(dateList[0].year, dateList[0].month, 1);
        scrollid = 'id' + dateList[0].year + 'a' + dateList[0].month
        now.setMonth(now.getMonth() - 2)
      }

      for (var i = 0; i >= 0 - this.data.maxMonth; i--) {
        var momentDate = Moment(now).add(this.data.maxMonth - (this.data.maxMonth - i), 'month').date;
        var year = momentDate.getFullYear();
        var month = momentDate.getMonth() + 1;

        var days = [];
        var totalDay = this.getTotalDayByMonth(year, month);
        var week = this.getWeek(year, month, 1);
        //-week是为了使当月第一天的日期可以正确的显示到对应的周几位置上，比如星期三(week = 2)，
        //则当月的1号是从列的第三个位置开始渲染的，前面会占用-2，-1，0的位置,从1开正常渲染
        for (var j = -week + 1; j <= totalDay; j++) {
          var tempWeek = -1;
          if (j > 0)
            tempWeek = this.getWeek(year, month, j);
          var clazz = '';
          if (tempWeek == 0 || tempWeek == 6)
            clazz = 'week'
          /** if (j < DATE_DAY && year == DATE_YEAR && month == DATE_MONTH)
             //当天之前的日期不可用
             clazz = 'unavailable ' + clazz;
           else
             clazz = '' + clazz
             **/
          days.push({
            day: j,
            class: clazz
          })
        }
        var dateItem = {
          id: year + '-' + month,
          year: year,
          month: month,
          days: days

        }

        dateList.unshift(dateItem);
      }
      // var sFtv = this.data.sFtv;
      // for (let i = 0; i < dateList.length; i++) { //加入公历节日
      //   for (let k = 0; k < sFtv.length; k++) {
      //     if (dateList[i].month == sFtv[k].month) {
      //       let days = dateList[i].days;
      //       for (let j = 0; j < days.length; j++) {
      //         if (days[j].day == sFtv[k].day) {
      //           days[j].daytext = sFtv[k].name
      //         }
      //       }
      //     }
      //   }
      // }
      this.setData({
        dateList: dateList,
        //+ dateList[0].year + 'a' + dateList[0].month

      }, function() {
        this.setData({
          scrollinto: scrollid
        })
      });
      DATE_LIST = dateList;
      wx.hideLoading()
    }
  }
})