微信小程序 date-picker

date-picker.js

// 从日历选择其他日期
const App = getApp();
Page({
  data: {
    year: '',
    month: '',
    day: '',
    firstIndex: 0,
    dayArr: [],
    priceObj: {
      '20180801': 300,
      '20180802': 300,
      '20180803': 300,
    },
    lastSelectIndex: false,
    nowSelectIndex: false
  },
  onShow(){
    console.log('other day show');
  },
  onLoad: function (option){

    console.log('other day load');
    console.log(getLastDayOfMonth(2018, 1));
    var _dateStr = getDateStr(getDateObj().getDate());
    console.log(_dateStr)
    var _year = getDateObj().getDate().getFullYear();
    var _month = getDateObj().getDate().getMonth() + 1;
    var _firstDay = new Date(_year, _month - 1, 1); // 当前月第一天

    // gen data of many days
    var _dayArr = [];
    _dayArr = getDayArr(_year, _month, _firstDay, _dateStr);
    console.log( '_dayArr',_dayArr)

    this.setData({
      year: _year,
      month: _dateStr.substr(4, 2),
      dayArr: _dayArr[0],
      dateStr: _dateStr, // 现在的时间字符串
      firstIndex: _dayArr[1],
      carId: option.carId
    });

    this.updateArrWithPrice( _year, _month, _dayArr[0], _dayArr[1] );
  
  },
  onUnload(){
    let {year, month, day} = this.data;
    if(day){
      wx.setStorageSync('bookDate', { year, month, day } );
    }
  },
  // 选择了日历格子中的某一天
  selectDay(e){
    let index = e.currentTarget.dataset.index;
    let currentMonth = e.currentTarget.dataset.currentmonth;
    let unSelect = e.currentTarget.dataset.unselect;
    if(currentMonth == 0) return;
    if (unSelect) {
      wx.showToast({
        title: '请选择今天或今天之后的日期',
        icon: 'none',
        duration: 2000        
      })
      return;
    }
    let {lastSelectIndex} = this.data;
    console.log(index)

    let nowKey = `dayArr[${index}].selected`;
    // console.log(key)

    let tmpObj = {
      [nowKey]: true
    };
    if(lastSelectIndex){
      let lastKey = `dayArr[${lastSelectIndex}].selected`;
      tmpObj[lastKey] = false
    }
    if (lastSelectIndex == index) { // 当前选择的和上次选择的一样
      return;
    }    
    tmpObj.lastSelectIndex = index
    tmpObj.day = this.data.dayArr[index].date;
    this.setData(tmpObj);
    setTimeout(() => wx.navigateBack(), 800);
  },
  // 上个月
  prev: function (){
    var that = this;
    var _month = Number(that.data.month) - 1;
    var _year = Number(that.data.year);
    if(_month <= 0){
      _month = 12;
      _year = _year - 1;
    }
    if(_month < 10){
      _month = '0' + _month;
    }
    this.updatePrice(_year, _month);
    this.setData({
      month: _month,
      year: _year,
      lastSelectIndex: false,
      day: false
    });
    let tmp = that.computeDayArr();
    this.setData({
      dayArr: tmp[0],
      firstIndex: tmp[1],
    });

    this.updateArrWithPrice(_year, _month, tmp[0], tmp[1]);    
  },
  // 下个月
  next: function (){
    var that = this;
    var _month = Number(that.data.month) + 1;
    var _year = Number(that.data.year);
    if(_month > 12){
      _month = 1;
      _year = _year + 1;
    }
    if(_month < 10){
      _month = '0' + _month;
    }
    this.updatePrice(_year, _month);
    this.setData({
      month: _month,
      year: _year,
      lastSelectIndex: false,
      day: false    
    });
    let tmp = that.computeDayArr();
    this.setData({
      dayArr: tmp[0],
      firstIndex: tmp[1]
    });

    this.updateArrWithPrice(_year, _month, tmp[0], tmp[1]);    
  },
  computeDayArr: function (){
    console.log(this.data)
    var _dateStr = getDateStr(getDateObj().getDate());
    console.log(_dateStr)
    var _year = this.data.year;
    var _month = this.data.month;
    var _firstDay = new Date(_year, _month - 1, 1); // 某月第一天

    // gen data of many days
    var _dayArr = [];
    _dayArr = getDayArr(_year, _month, _firstDay, _dateStr);
    return _dayArr;
  },
  // 获取price数据
  updatePrice(year, month){
    let firstDayStamp = new Date(year, month - 1, 1).getTime()/1000;
    let lastDayStamp = getLastDayOfMonth(year, month)/1000;

    let scheduleArr = wx.getStorageSync('scheduleArr');
    let oil_id = wx.getStorageSync('oil_id');
    let scheduleStr = '';
    if (scheduleArr && scheduleArr.length) {
      scheduleArr.forEach(v => scheduleStr = scheduleStr + v + ',');
      scheduleStr = scheduleStr.substr(0, scheduleStr.length - 1);
    }

    return App.HttpService.getMinPrice({
      date: firstDayStamp,
      end: lastDayStamp,
      schedule_id: scheduleStr,
      car_id: '' + this.data.carId,
      oil_id: oil_id
    });
  },
  // 向格子内填充的数组中注入price字段
  updateArrWithPrice(_year, _month, arr, firstIndex){
    this.updatePrice(_year, _month).then(r => {
      console.log(r)

      arr.forEach((v, i) => {
        if (i >= firstIndex && r.data.data[i - firstIndex]) {
          arr[i].price = r.data.data[i - firstIndex];
          // console.log(i)
        }
      });
      this.setData({
        dayArr: arr
      });
    });  
  }  
})

function getDateObj(){
  var _date = new Date(); // 默认为当前系统时间
  return {
    getDate: function (){
      return _date;
    },
    setDate: function (date){
      _date = date;
    }
  };
}

function getDateStr(date){
  var _year = date.getFullYear();
  var _month = date.getMonth() + 1; // 月从0开始计数
  var _d = date.getDate();

  _month = (_month > 9) ? ("" + _month) : ("0" + _month);
  _d = (_d > 9) ? ("" + _d) : ("0" + _d);
  return _year + _month + _d;
}

// 计算对应格子是几月几号 
function getDayArr(_year, _month, _firstDay, _dateStr ){
  var _arr = []
  let firstDayOfMonth = 0; // 一个月的第一天是第几个格子 index
  for(var i = 0; i < 7 * 6; i++){
    var _thisDay = new Date(_year, _month - 1, i + 1 - _firstDay.getDay());
    var _thisDayStr = getDateStr(_thisDay);
    var _dayObj = {};
    _dayObj.date = _thisDay.getDate();
    if (_thisDayStr < _dateStr) { // 在今天之前
      _dayObj.unselect = true; // 不可选
    }    
    if(_thisDayStr == _dateStr){ // 当前天
      _dayObj.currentDay = true;
      // _dayObj.selected = true;
    }
    if(_thisDayStr.substr(0, 6) == getDateStr(_firstDay).substr(0, 6)){
      _dayObj.currentMonth = true; // 当前月
      if(!firstDayOfMonth){
        firstDayOfMonth = i;
      }
    }
    if(_dayObj.currentDay && !_dayObj.currentMonth){ // fix 2018-08-03
      _dayObj.currentDay = false;
    }
    _arr[i] = _dayObj;
  }
  return [_arr, firstDayOfMonth];
}

// 获取某年某月最后一天 零点 的时间戳 
// 传递的年月为实际月份
function getLastDayOfMonth(year, month){
  let now = new Date();
  let day = new Date (year, month - 1, 1)
  // 获取 某年某月 1号 的 字符串 20180901
  let dayStr = getDateStr(day);
  let monthStr = dayStr.substr(0, 6);
  console.log(monthStr);
  let arr = [];
  let index = 0;
  for(let i = 1; i<= 33; i++){
    let tmpDay = new Date(day.getTime()).setDate(i);
    arr.push(new Date(tmpDay));
  }
  console.log(arr)

  arr.forEach((v ,i)=>{
    if (getDateStr(v).substr(0, 6) != monthStr ){
    }else{
      index += 1;
    }
  });

  return new Date(year, month - 1, index).getTime();
}

date-picker.wxml

<view class="container other-day">

  <view class='top'>
    <i class="material-icons" bindtap='prev' >arrow_left</i>
    {{year}}年{{month}}月
    <i class="material-icons" bindtap='next'>arrow_right</i>
  </view>
    
  <view class='line'></view>
  <view class='day-week'>
    <text>日</text>
    <text>一</text>
    <text>二</text>
    <text>三</text>
    <text>四</text>
    <text>五</text>
    <text>六</text>                        
  </view>
  <view class='dates'>
    <block wx:for="{{dayArr}}">
      <view class='day-wrap {{item.currentDay?"current-day":(item.currentMonth?"current-month":"")}} {{item.selected ? "on" : "" }}' 
      catchtap='selectDay' 
      data-index='{{index}}' 
      data-currentmonth='{{item.currentMonth ? "1" : "0" }}'
      data-unselect='{{item.unselect}}'>
        <text class='day'>{{item.date}}{{}}</text>
        <text class='price fs-12'>{{item.price}}</text>
      </view>
      
    </block>
  </view>
</view>