el-date-picker 自定义指令，输入数字显示yyyy-mm-dd格式-direct.js

2024-10-10 06:57:24

公共部分

import Vue from 'vue'
import $ from 'jquery'; // 在需要使用的页面中
// 补0
// 使用$&匹配
function supplement(str) {
  // replace第一个参数正则
  // (?<=\/|-|\.|:|\b)\d{1}  用的是后顾，查找 / 或者 - 或者 . 或者 : 或者 单词边界 或者 T 后面的一个数字
  // \d{1}(?=\/|-|\.|:|\b)   用的是前瞻，查找 / 或者 - 或者 . 或者 : 或者 单词边界  或者 T 前面的一个数字
  // replace 第二个参数"0$&" 匹配到的字符串前置补0
  // return str.replace(/(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g, "0$&");
  let regExp = new RegExp("(?<=\/|-|\\.|\:|\\b|T)\\d{1}(?=\/|-|\\.|\:|\\b|T)", "g")
  return str.replace(regExp, "0$&");
}

时间日期选择器 - (年-月-日)

 <el-form-item ref="birthday" prop="birthday">
	<el-date-picker v-model="birthday" type="date" v-dateYMDFormat value-format="yyyy-MM-dd"> </el-date-picker>
</el-form-item>

Vue.directive('dateYMDFormat', {
  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转换,更直接。
      value = value.replace(/[^0-9]/g, '')
      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
      }
      value = supplement(value)
      // 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  // 转换时间格式
      // const time = value  // 转换时间格式
      const time = value && value.constructor == String ? 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);
        })
      }
    }
  }
})

时间月份选择器(年-月-01) - 格式转换正则

      // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
      value = value.replace(/[^0-9]/g, '')
      if (value.length > 5 && value.length < 7) {
        value = value + '01'
        value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-01
      } else {
        return false
      }

时间月份选择器(年-月) - 格式转换正则

      // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
      value = value.replace(/[^0-9]/g, '')
      if (value.length === 5) {
        value = value.replace(/^(\d{4})\D*(\d{1})\D*/, '$1-0$2') // 格式化输入格式,2021-03
      } else if (value.length > 5) {
        value = value.replace(/^(\d{4})\D*(\d{1,2})\D*/, '$1-$2') // 格式化输入格式,2021-03
      } else {
        return false
      }

时间月份选择器(年-01-01) - 格式转换正则

      // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
      value = value.replace(/[^0-9]/g, '')
      if (value.length <= 4) {
        value = value + '0101'
        value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-01
      } else if (value.length <= 4) {
        value = value.substring(0, 4) + '0101'
        value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-01
      } else {
        return false
      }

时间范围控件 - (年-月-日)

<el-date-picker v-model="DateArr" type="daterange" v-daterangeYMDFormat="DateArr" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始" end-placeholder="结束"></el-date-picker>

Vue.directive('daterangeYMDFormat', {
  // 当绑定元素插入到DOM中
  inserted: function (el, binding, vnode) {
    // 获取绑定的值
    let value = binding.value;
    const { context: _this, data } = vnode
    const modelValue = function (value, len) {
      // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
      value = value.replace(/[^0-9]/g, '')
      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
      }
      value = supplement(value)
      const time = value && value.constructor == String ? value : ''  // 转换时间格式
      return time
    }

    // 绑定 change 事件来更新绑定的数组
    el.addEventListener('change', () => {
      value[0] = $($(el).children('input')[0]).val()
      value[1] = $($(el).children('input')[1]).val()
      value = value.map(date => !!date ? modelValue(date) : '')
      vnode.child.$emit('input', value);
    });
  }
});

表格内编辑时间控件 - (年-月-日)

<el-table-column prop="time" label="时间" width="140">
	<template slot-scope="scope">
		<el-date-picker v-if="!!scope.row.addNew || !!scope.row.editRow" :size="elTableTreeFormSize" type="date" v-model="scope.row.time" v-tableYMDFormat value-format="yyyy-MM-dd" @keypress.enter.native="saveRow(scope.row)"></el-date-picker>
		<span v-else>{{ scope.row.time }}</span>
	</template>
</el-table-column>

Vue.directive('tableYMDFormat', {
  inserted: function (el, binding, vnode) {
    const { value: _obj } = binding
    const { context: _this, data } = vnode
    const modelValue = function (value, len) {
      // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
      value = value.replace(/[^0-9]/g, '')
      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
      }
      value = supplement(value)
      const time = value && value.constructor == String ? value : ''  // 转换时间格式
      vnode.child.$emit('input', time);
    }
    if (_this && _this._isVue) {
      const $this = $($(el).children('input')[0])
      $this.on('change', function () {
        let value = $this.val()
        modelValue(value, 1);
      })
    }
  }
});
上一篇：长芯微LSPGD1系列带气嘴DIP8封装集成表压传感器完全替代松下ADP51B62替代ADP51B62，成本更低！


下一篇：python不用ide也能进行调试