微信小程序 picker组件自定义选择时间粒度

一个类似用车时间的粒度选择功能：如图所示

代码如下：

//wxml
<picker class='address-detail' mode="multiSelector" bindcolumnchange="bindcolumnChange" bindchange="bindChange" value="{{dateIndex}}" range="{{dateArray}}">
  <view class="picker">
    <view class="flex">
        <view>
        {{dateArray[0][dateIndex[0]]}}
        </view>
        <view style="margin-left:20rpx">
        {{dateArray[1][dateIndex[1]]}}
        </view>
        <view>
        {{dateArray[2][dateIndex[2]]}}
        </view>
    </view>
  </view>
</picker>

//wxss
.flex{
  display: flex
}

//js
var Moment = require('../../utils/Moment.js') //自己项目中的路径
Page({

  /**
   * 页面的初始数据
   */
  data: {
    dateArray: [],
    dateIndex: [0, 0, 0]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let year = Moment().format('yyyy')
    let month = Moment().format('M')
    let nextMonth = Moment().add(1, 'month').format('M')
    year = nextMonth == 1 ? Number(year) + 1 : year
    let daysnum = Number(this.getDayNum(year, month)) + Number(this.getDayNum(year, nextMonth))
    console.log('两个月总天数', daysnum)
    let showMonth = []
    let needMonth = []
    for (let i = 0; i < daysnum; i++) {
      showMonth.push(Moment().add(i, 'day').format('MM月DD日 E'))
      needMonth.push(Moment().add(i, 'day').format('yyyy-MM-dd'))
    }
    showMonth.forEach(function (item, i) {
      if (i < 2) {
        if (i == 0) {
          showMonth[i] = item.split(' ')[0] + ' 今天'
        } else if (i == 1) {
          showMonth[i] = item.split(' ')[0] + ' 明天'
        }
      } else {
        if (item.split(' ')[1].indexOf('u65e5') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期天'
        } else if (item.split(' ')[1].indexOf('u4e00') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期一'
        } else if (item.split(' ')[1].indexOf('u4e8c') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期二'
        } else if (item.split(' ')[1].indexOf('u4e09') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期三'
        } else if (item.split(' ')[1].indexOf('u56db') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期四'
        } else if (item.split(' ')[1].indexOf('u4e94') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期五'
        } else if (item.split(' ')[1].indexOf('u516d') > -1) {
          showMonth[i] = item.split(' ')[0] + ' 星期六'
        }
      }
    })
    let nowtime = Moment().format('hh:mm')
    let all_HoursArray = this.getHourNum(nowtime.split(':')[0], nowtime.split(':')[1])
    let all_MinutesArray = this.getMinutesNum(nowtime.split(':')[1])
    this.setData({
      nowtime: nowtime,
      dateArray: [showMonth, all_HoursArray[0], all_MinutesArray[0]],
      needMonth: needMonth,
      needHours: all_HoursArray[1],
      needMinutes: all_MinutesArray[1]
    })
    console.log(this.data.dateArray)
  },
  // 获取月份的天数
  getDayNum(year, month) {
    let d = new Date(year, month, 0)
    return d.getDate()
  },
  getHourNum(nowtime_h, nowtime_m) {
    let showHours = []
    let needHours = []
    nowtime_h = Number(nowtime_m) > 50 ? (Number(nowtime_h) + 1) : Number(nowtime_h)
    for (let i = 1; i <= 24; i++) {
      if (i >= nowtime_h) {
        showHours.push(i < 10 ? ('0' + i + '点') : (i + '点'))
        needHours.push(i < 10 ? ('0' + i) : i)
      }
    }

    return [showHours, needHours]
  },
  getMinutesNum(nowtime_m) {
    let showMinutes = []
    let needMinutes = []
    nowtime_m = Number(nowtime_m)
    console.log(nowtime_m)
    for (let i = 0; i < 6; i++) {
      if (nowtime_m > 50) {
        showMinutes.push(10 * i == 0 ? '00分' : 10 * i + '分')
        needMinutes.push(10 * i == 0 ? '00' : 10 * i)
      } else if (10 * i >= nowtime_m) {
        showMinutes.push(10 * i == 0 ? '00分' : 10 * i + '分')
        needMinutes.push(10 * i == 0 ? '00' : 10 * i)
      }
    }
    return [showMinutes, needMinutes]
  },
  bindcolumnChange: function (e) {
    let columnChange = e.detail.column
    let valueChange = e.detail.value
    let nowtime = this.data.nowtime.split(':')
    let data = {
      dateArray: this.data.dateArray,
      dateIndex: this.data.dateIndex,
      needHours: this.data.needHours,
      needMinutes: this.data.needMinutes
    }
    data.dateIndex[columnChange] = valueChange
    switch (columnChange) {
      case 0:
        if (data.dateIndex[0] == 0) {
          let getHourNum = this.getHourNum(nowtime[0], nowtime[1]);
          let getMinutesNum = this.getMinutesNum(nowtime[1]);
          data.dateArray[1] = getHourNum[0]
          data.dateArray[2] = getMinutesNum[0]
          data.needHours = getHourNum[1]
          data.needMinutes = getMinutesNum[1]
        } else {
          let getHourNum = this.getHourNum(1, 0)
          let getMinutesNum = this.getMinutesNum(0)
          data.dateArray[1] = getHourNum[1]
          data.dateArray[2] = getMinutesNum[0]
          data.needHours = getHourNum[1]
          data.needMinutes = getMinutesNum[1]
        }
        data.dateIndex[1] = 0
        data.dateIndex[2] = 0
      case 1:
        let getMinutesNum = this.getMinutesNum(0)
        data.dateArray[2] = getMinutesNum[0]
        data.needMinutes = getMinutesNum[1]
        if (data.dateIndex[0] == 0 && data.dateIndex[1] == 0) {
          let getMinutesNum = this.getMinutesNum(nowtime[1])
          data.dateArray[2] = getMinutesNum[0]
          data.needMinutes = getMinutesNum[1]
        }
        data.dateIndex[2] = 0
    }
    this.setData(data)
  },
  bindChange: function (e) {
    this.setData({
      dateIndex: e.detail.value
    })
    console.log(this.data.dateIndex)
  }
})

utils下面的Moment.js

var Moment = function (date) {
  // var date
  if (date) {
    date = date.replace(/-/g, '/')
    this.date = new Date(date)
  } else {
    this.date = new Date()
  }
  return this
}
/**
 * 对Date的扩展，将 Date 转化为指定格式的String
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 * eg:
 * "yyyy-MM-dd hh:mm:ss.S" ==> 2006-07-02 08:09:04.423
 * "yyyy-M-d h:m:s.S" ==> 2006-7-2 8:9:4.18
 * "yyyy-MM-dd E HH:mm:ss" ==> 2009-03-10 二 20:09:04
 * "yyyy-MM-dd EE hh:mm:ss" ==> 2009-03-10 周二 08:09:04
 * "yyyy-MM-dd EEE hh:mm:ss" ==> 2009-03-10 星期二 08:09:04
 */
Moment.prototype.format = function (format) {
  var date = this.date
  /*
    var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)
    r.exec('1985-10-15');
    s1=RegExp.$1;s2=RegExp.$2;s3=RegExp.$3;//结果为1985 10 15
   */
  if (typeof date === 'string') {
    date = this.parse(date)
  }
  var o = {
    'M+': date.getMonth() + 1, // 月份
    '(d+|D+)': date.getDate(), // 日
    '(h+|H+)': date.getHours(), // 小时
    'm+': date.getMinutes(), // 分
    's+': date.getSeconds(), // 秒
    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    'S': date.getMilliseconds() // 毫秒
  }
  var week = {
    '0': '/u65e5',
    '1': '/u4e00',
    '2': '/u4e8c',
    '3': '/u4e09',
    '4': '/u56db',
    '5': '/u4e94',
    '6': '/u516d'
  }
  if (/(y+|Y+)/.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  if (/(E+)/.test(format)) {
    format = format.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '/u661f/u671f' : '/u5468') : '') + week[date.getDay() + ''])
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(format)) {
      format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    }
  }
  return format
}

Moment.prototype.parse = function () {
  return this.date
}
/**
 * 计算两个日期差差
 * return day
 */
Moment.prototype.differ = function (date) {
  // var time1 = this.date.getTime()
  if (typeof date === 'string') {
    date = new Date(date)
  }
  var time1 = this.date.getTime()
  var time2 = date.getTime()
  // 除不尽时,向上取整
  var differ = Math.ceil((time1 - time2) / (1000 * 3600 * 24))
  return differ
}

Moment.prototype.add = function (num, optionType) {
  var date = this.date
  if (optionType === 'day') {
    date.setDate(date.getDate() + num)
  }
  if (optionType === 'month') {
    date.setMonth(date.getMonth() + num)
  }
  if (optionType === 'year') {
    date.setFullYear(date.getFullYear() + num)
  }
  this.date = date
  return this
}
Moment.prototype.before = function (date) {
  return this.date.getTime() < new Date(date).getTime()
}
Moment.prototype.after = function (date) {
  return this.date.getTime() > date.getTime()
}
module.exports = function (date) {
  return new Moment(date)
}