elementUI时间选择器(el-date-picker)输入格式的转换与自定义

1、背景

现在很多的web端管理系统会选用vue+element-ui这套技术体系去实现前端界面开发。在使用时间控件的时候的时候，很多用户会希望输入202103100915能够显示成2021-03-10 09:15或2021/03/10 09:15等，总而言之就是输入方便，显示优美。效果如下图所示：

2、方案设计

刚刚听SA给我提这个需求的时候，我的第一反应就是去Element官网看看是否有什么属性支持自定义输入的，还真别说，找到了下面两个属性，于是就迫不及待的拿来试了试。属性如下图：

测试过后发现并不能满足需求，因为你format绑定了什么格式，在手动输入的时候也必须是什么格式，要不绑定不上值。所以这时候我就想着是不是能用指令的方式来实现这个效果。最后要是还不行只能让技术部的大佬去改框架了，因为我们公司所用前端element框架有进行了一层自己的封装。经过测试发现采用指令的方式能达到客户想要的那种效果。

指令代码如下：

import $ from 'jquery'; //在需要使用的页面中
import moment from 'moment' //引入js日期处理类库

// 时间选择器 - 输入格式转换
  Vue.directive('dateFormat', {
    inserted: function (el, binding, vnode) {
      const { value: _obj } = binding
      const { context: _this, data } = vnode
      const { expression: key } = data.model
      let arr = []
      const modelValue = function(value,len) {
        // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
        if(value.length>5&&value.length<9) {
          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-01
        }else if(value.length>9&&value.length<13){
          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3 $4:$5') // 格式化输入格式,2021-03-01 09:50
        }else if(value.length>12){
          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3 $4:$5:$6') // 格式化输入格式,2020-03-01 09:50:30
        }else{
          return false
        }
        //const newValue = value.replace(/-/g,"/"); //解决前台new Date（yyyy-MM-dd）转化时间相差8小时的问题,不知道靠不靠谱，改用moment
        //const time = value && value.constructor == String ? new Date(newValue) : value  // 转换时间格式
        const time = value && value.constructor == String ? moment(value) : value  // 转换时间格式
        let keys = key.split('.')
        if(arr.length === len) {
          arr = [];
        }
        arr.push(time)
        // 判断指令是否有传值，是否有传数组的名称跟索引值，原因：转换出来的时间控件_this[key1][key2]取不到绑定的相关值
        if(!_obj) {
          // 处理简单的绑定
          if (keys && keys.length >= 2) {
            const [key1, key2, key3, key4] = keys
            if (key4) {
              _this[key1][key2][key3][key4] = len===2?arr:time;
            } else if (key3) {
              _this[key1][key2][key3] = len===2?arr:time;
            } else {
              _this[key1][key2] = len===2?arr:time;
            }
          }else{
            _this[key] = len===2?arr:time;
          }
        }else{
          // 处理循环中的时间控件绑定，需要传值，再去相应的数组中查找相应的字段赋值
          let objKey =  _obj.obj.split('.')
          if (objKey && objKey.length >= 2) {
          // 解构赋值
          const [flag1, flag2, flag3, flag4] = objKey;
          // _obj.index：索引，_obj.modelName：绑定的字段名
            if (flag4) {
              _this[flag1][flag2][flag3][flag4][_obj.index][_obj.modelName] = len===2?arr:time;
            } else if (flag3) {
              _this[flag1][flag2][flag3][_obj.index][_obj.modelName] = len===2?arr:time;
            } else {
              _this[flag1][flag2][_obj.index][_obj.modelName] = len===2?arr:time;
            }
          }else{
            _this[objKey][_obj.modelName] = len===2?arr:time;
          }
        }
      };
      if(_this && _this._isVue) {
        const $this = $($(el).children('input')[0])
        const $this2 = $($(el).children('input')[1])
        // 判断是范围的还是单个独立的日期时间控件，范围的两个输入框都要绑定change事件
        if($(el).children('input').length>1) {
          $this.on('change', function() {
            let value = $this.val()
            modelValue(value,2);
          })
          $this2.on('change', function() {
            let value = $this2.val()
            modelValue(value,2);
          })
        }else{
          $this.on('change', function() {
            let value = $this.val()
            modelValue(value,1);
          })
        }
      }
    }
  })

使用如下：
（1）v-model是确切的，直接绑定就可以

（2）遍历出来的时间控件，在this对象上是找不到它绑定的v-model的，所以需要吧它的数组对象、字段名和索引传到指令里去左结构赋值

3、说明

（1）vue中使用jquery

npm install jquery
import $ from ‘jquery’; //在需要使用的页面中

（2）moment时间插件的使用

moment.js官网