mint_picker - 复杂联动日期选择

2019-08-10

最近好久都没写一点什么了, 除了最近有那么稍稍一点忙之外, 可能最主要的还是这鬼天气, 让人变得太懒了吧. 当然全是天气的锅啦!
最近搞了一个小项目吧, 要求做时间选择器? 先来瞅瞅我们的需求: 时间选择器有三种模式: 日, 周, 月. 然后我指定查看某种模式需要弹出不一样的选择模式. 嗯, 这个月是真的炒鸡简单吧. 至于那个日, 还好吧. 只需要把闰月算出来….. 至于周, 是真的麻烦吧. 啥也不说了, 先瞅瞅最终样式图

Images View

理一下思路

首先, 也就是一个计算属性返回三个数组给picker, 主要的重点在于数据的计算吧, 月份选择么. 不用多说直接1-12, 也就OK, 日期选择么, 也就多一个返回每个月份多少天, 主要重点也就是闰月计算了, 至于周, 我这是首先找到第一个月中的周一, 也就是先new Date(“2019-7”).getUTCDay(), 这样再做判断周一, 然后一直加6天, 每次计算下开始的日期获取下getMonth(), 如果是下一月就结束, 这样每一月的第一个残周给推到上一月去

代码实现

月份选择

首选也就定义一个计算属性, 判断当前的tabInde是月份选择, 给返回两组数据出去

// 初始化一些常用的常量
const Now = new Date()
const _month = Now.getMonth()+1,
  // 我这里是默认选中昨天而非今天
  _day = Now.getDate()-1,
  _year = Now.getFullYear()

// 随时会遇到通过数字取数组的问题, 定义一个全局的方法
function toList(num){
  let list = [], i= 1
  for(i; i <= num; i++){
    list.push(i)
  }
  return list
}

...
computed: {
  slots: function(){
      const { tabInde } = this
      if(tabInde === 2){
        const Month = [...toList(_month)]
        // 我这里默认返回的是前一天, 所以当天是1号的话, 这个月也就不需要了
        if(Now.getDate() === 1) Month.pop()
        return [
          {
            flex: 1,
            values: [_year],
            textAlign: 'center',
            className: 'slot-1'
          },{
            divider: true,
            content: '年',
            className: 'slot'
          },{
            flex: 1,
            values: Month,
            defaultIndex: Month.length-1,
            className: 'slot-2',
            textAlign: 'center'
          },{
            divider: true,
            content: '月',
            className: 'slot'
          }
        ]
      }
    }
}
...

日期选择

月份选择就是那么简答, 接下来实现下日期的选择

...
// 直接定义一个全局的通过月份返回天数
function monthToDay(m){
  // 大月, 很固定的, 只有下面几个
  if(m ==1 ||m ==3 ||m ==5 ||m ==7 ||m ==9||m ==11 ) return 31
  // 2月, 这个是最麻烦的, 因为闰年
  // 能除4尽, 但又不能被100除尽   能被 400除尽
  else if(m ==2){
    if ((_year % 4 === 0 && _year % 100 !== 0)||_year % 400 === 0) return 29
    else return 28
  }
  // 其他的都是小月了
  else return 30
}
...
//  接着联动哪里写
if(tabInde === 0){
  const Month = [...toList(_month)]
  const Day = toList(_day)
  return [
    {
      flex: 1,
      values: [_year],
      textAlign: 'center',
      className: 'slot-1'
    },{
      divider: true,
      content: '-',
      className: 'slot'
    },{
      flex: 1,
      values: Month,
      defaultIndex: Month.length-1,
      className: 'slot-2',
      textAlign: 'center'
    },{
      divider: true,
      content: '-',
      className: 'slot'
    },{
      flex: 1,
      values: Day,
      defaultIndex: Day.length-1,
      className: 'slot-3',
      textAlign: 'center'
    }
  ]
}
...
// 月份的话, 还有联动的部分嘛, 所以还需要搞下才完美

methods: {
  onValuesChange(picker, values) {
    const { tabInde } = this
    if(tabInde === 0){
      if(values[1] !== _month){
        // 未选中当前月
        picker.setSlotValues(2, toList(monthToDay(values[1])))
      }else{
        // 选中当前月
        picker.setSlotValues(2, toList(_day))
      }
    }
}

周

数据驱动视图, 真的简化了我们许多事情, 接下来就计算下周吧

// 这里需要用到原生date没有的方法, 对时间的格式化输出
Date.prototype.Format = function (fmt) {
  let o = {
    "Y+": this.getFullYear(),
    "M+": this.getMonth() + 1, // 月份
    "d+": this.getDate(), // 日
    "h+": this.getHours(), // 小时
    "m+": this.getMinutes(), // 分
    "s+": this.getSeconds(), // 秒
  };
  if (/(y+)/.test(fmt))
    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + ""));
  for (let 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;
}
// 同样在这里定义一个函数
function weekToDay(date){
  date = new Date(date)
  let To = new Date(date.getTime() + (7 - (date.getUTCDay()?date.getUTCDay():7)) * 8.64e7)
  const wDate = [],startMonth = To.getMonth()
  let d = 6
  while(d){
    const start = To.Format('Y-M-d'), end = new Date(To.getTime()+6*8.64e7)
    if(To.getMonth() !== startMonth) return wDate
    wDate.push([start,end.Format('Y-M-d')])
    To = new Date(end.getTime() + 8.64e7)
    --d
  }
}
...
// 并且我们这还需要计算本月周, 本月需要反过来计算
data(){
  return {
    fastWeekList: (()=>{
      // Now
      let week = [], start = new Date(Now.getTime() - 8.64e7), i = 6, To = ''
      const sMonth = start.getMonth()
      while(i){
        To = new Date(start.getTime() - ((start.getUTCDay()?start.getUTCDay():7) - 1)*8.64e7)
        if(To.getMonth() !== sMonth) return week.reverse()
        week.push([To.Format('Y-M-d'),start.Format('Y-M-d')])
        start = new Date(To.getTime() - 8.64e7)
        --i
      }
      return week.reverse()
    })()
  }
}
...
// 接下来还是计算属性那
else if(tabInde === 1){
  const Month = [...toList(_month)]
  // 同样, 删除 最后一个月
  if(!this.fastWeekList.length) Month.pop()
  return [
    {
      flex: 1,
      values: [_year],
      textAlign: 'center',
      className: 'slot-1'
    },{
      divider: true,
      content: '-',
      className: 'slot'
    },{
      flex: 1,
      values: Month,
      defaultIndex: Month.length-1,
      className: 'slot-2',
      textAlign: 'center'
    },{
      divider: true,
      content: '-',
      className: 'slot'
    },{
      flex: 1,
      values: this.fastWeekList.map((item,index)=>'第'+(index+1)+"周"),
      defaultIndex: this.fastWeekList.length-1,
      className: 'slot-3',
      textAlign: 'left'
    }
  ]
}
...
// 再来看看联动的部分
else if(tabInde === 1){
  // 一样的先判断是否当前月
  if(values[1] !== _month){
    // 先缓存下来, 然后确认的时候再从缓存里读取
    this.weekTemp = weekToDay(values[0]+'-'+values[1])
  }else {
    this.weekTemp = this.fastWeekList
  }
  picker.setSlotValues(2, this.weekTemp.map((item,index)=>'第'+(index+1)+"周"))
}

结束

基本上就这个样子了, 代码有点乱了, 我自己都有点看不下去的亚子, 不够胜在功能完善, 能够交差了事

还是有需要的不够的地方, 比如我这里没有处理年份, 应该需要处理以下, 从当前的时间到2019年这样拍下去, 不过现在还早嘛, 等着20年元旦再弄啦