vue项目使用mint-ui日期选择框时报错

原创！

TypeError: Cannot read property 'split' of undefined

<mt-datetime-picker ref="timePick" v-model="putTimeEnd" type="time" @confirm="confirm"></mt-datetime-picker>

原因：

这里使用了mint-ui的mt-datetime-picker，报错说split不是一个方法，那么我们应该思考是否是使用split绑定的值，是不是split可以使用的值类型。这里是mint-ui源码里的报错，使用split对时间插件进行处理，最后得到我们想要的格式化时间。

 

改正方法：

上面我说了报错原因，说明v-model绑定的值 ,不是mint-ui源码规定的值类型，这里我们把v-model=‘putTimeEnd’删除，在comfirm方法内定义时间格式化的逻辑。

 

再多说一些关于时间插件格式化的问题：

绝大部分情况下，后端传来的时间格式一般是13位的时间戳，这时候我们要显示给用户的是格式化后的时间格式，比如yy-mm-dd这类的，就以我自己做到的项目为例，后端传给我的日期是13位的时间戳，时间是0到4位的数字（比如0，2359，显示的应该是23:59这样的），后面再说日期的处理。

我感觉这样传来的格式真的挺麻烦的，没办法，还要自己去给他加过滤，如果一直是0000这样4位数的格式传过来不好吗，嗯，我还是别想太多了。那么我们就来给4位时间数写个过滤吧，因为写过滤不会改变原有的值。

filters: {
...
    timeFilter (value) {
      let val = String(value);
      if(val.length==1) {
        return '00:0'+val;
      } else if (val.length==2){
        return '00:'+ value;
      } else if (val.length==3){
        return '0'+ val[0]+':'+val.substr(1,2);
      } else if (val.length==4) {
        return val.substr(0,2)+":"+val.substr(2,2);
      }
    }
}

这里的value是我从后端拿到的time数字格式的时间，所以必须转为字符串再进行格式化。

我们先写好过滤后，这是后话，我们首先要做的就是把时间插件选择的值赋给我们需要绑定的值（从后端拿到的数据），

methods: {
    confirmTime1(value) { //选择开始日期
      //把插件时间格式->>后端接口对应格式 | 过滤显示
      this.detail.putTimeStart = Number(String(value).replace(':',''));
      this.updateData(); //这个是我自己的接口，可以忽略
    },
}


这里其实就是把23:59转换为2359的过程

其实我之前一直有个想法，很坑的想法。因为从后端拿到的数据是数字，我就想着把他先转为字符串的格式展示给用户，然后传给后端时再转换回来给后端。现在发现这个想法太麻烦且很绕，现在发现只要把拿到的数据直接赋值给v-model视图层，中间的处理在confirm里面再进行时间转换的处理，然后在视图层加个过滤，现在本质上传给后端的数据还是数字的形式，这样就省事多了。

所以现在模版的内容是这样的，mint-ui引入以及其他data我就不具体说了，有问题可以留言

    <div class="item">
        <div class="top">
          <span>投放时间段：</span>
          <div class="date-group">
            <span class="span" @click="selTimeStart">{{detail.putTimeStart|timeFilter}}</span>
            <span class="span">至</span>
            <span class="span" @click="selTimeEnd">{{detail.putTimeEnd|timeFilter}}</span>
          </div>
        </div>
        <h6 class="bottom">用户可在每天特定时间段查看该吸粉任务</h6>
      </div>

      <mt-datetime-picker ref="timePick1" type="time" @confirm="confirmTime1"></mt-datetime-picker>
      <mt-datetime-picker ref="timePick2" type="time" @confirm="confirmTime2"></mt-datetime-picker>

不写了，午休了。

有空我会把源码放在github上的。

本来想写下日期yy-mm-dd格式的转换，太忙了有时间在写。