picker：限制时间范围之mpx

背景：

       公司采用mpx框架开发商城小程序，业务需求：时间组件禁止选择大于当前时间

技术方案：

       微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html

       查看组件picker提供的能力：

设计思路：

1、使用end属性       

            <picker mode="date" fields="month" value="{{startDate}}" end="{{endDate}}" bindchange="bindDateChange" class="gold-picker">
              <text wx:if="{{startDate}}" class="wx-picker selected">{{ startDate }}</text>
              <text wx:else class="wx-picker">{{ dateValue }}</text>
              <c-icon class="icon-click arrow arrow-down" type="click" />
            </picker>

2、获取当前时间

/**
 * 时间格式化方法
 * @param {*} fmt YYYY-MM-dd hh:mm:ss
 * @param {*} date 需要格式化的时间，默认为当前时间
 */
/* eslint-disable */

export const formatDate = (fmt, date = new Date()) => {
  if (typeof date == 'string' || typeof date == 'number') {
    if (typeof date === 'string') {
      // ios 中 "2018-04-27 11:11" 格式的字符串不能 new Date(), 需要将 '-' 替换为 '/'
      date = date.replace(/-/g, '/')
    }
    date = new Date(date)
  }
  if (date == 'Invalid Date') {
    return ''
  }
  var o = {
    'M+': date.getMonth() + 1, //月份
    'd+': date.getDate(), //日
    'h+': date.getHours(), //小时
    'm+': date.getMinutes(), //分
    's+': date.getSeconds(), //秒
    'q+': Math.floor((date.getMonth() + 3) / 3), //季度
    S: date.getMilliseconds() //毫秒
  }
  if (/(y+)/i.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
    )
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
      )
  }
  return fmt
}

3、mpx初始化定义

endDate: formatDate('YYYY-MM-dd'),

4、实现效果：

 

fix：如果禁止picker组件不能选择小于当前时间：

       使用「start」属性，具体值根据实际需求来确定