el-date-picker 自界说指令，输入数字自动转换表现yyyy-mm-dd格式

---

在main.js引入自界说指令direct.js

1. import '@/components/common/js/direct.js'

复制代码

direct.js

公共部门

注：自界说指令传值时，binding.value是吸收值

1. import Vue from 'vue'
2. // import $ from 'jquery'; // 在需要使用的页面中
4. // 日期转换正则
5. const convertYMDRegExp = function (type, value) {
6.   // 判断输入的时间为几位数，正则匹配相应的事件格式。可直接采用moment转换,更直接。
7.   value = value.replace(/[^0-9]/g, '')
9.   // 根据type判断格式，默认格式：年-月-日
10.   switch (type) {
11.     case 'y-01-01': // 年-01-01，格式化输入格式,2021-01-01
12.       value = value + '-1-1'
13.       break
14.     case 'y-m': // 年-月，格式化输入格式,2021-03
15.       value = ymFun(value)
16.       break
17.     case 'y-m-01': // 年-月-01，格式化输入格式,2021-03-01
18.       value = ymFun(value)
19.       value = value + '-1'
20.       break
21.     default: // 年-月-日
22.       if (value.length > 5 && value.length < 9) {
23.         value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式,2021-03-05
24.       } else if (value.length > 9 && value.length < 13) {
25.         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-05 09:50
26.       } else if (value.length > 12) {
27.         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-05 09:50:30
28.       }
29.   }
30.   value = supplement(value)
31.   const time = value && value.constructor == String ? value : ''  // 转换时间格式
32.   return time
33. }
35. // 年-月
36. const ymFun = function (value) {
37.   if (value.length === 5) {
38.     value = value.replace(/^(\d{4})\D*(\d{1})\D*/, '$1-0$2')
39.   } else if (value.length > 5) {
40.     value = value.replace(/^(\d{4})\D*(\d{1,2})\D*/, '$1-$2')
41.   }
42.   return value
43. }
45. // 补0
46. // 使用$&匹配
47. function supplement(str) {
48.   // replace第一个参数正则
49.   // (?<=\/|-|\.|:|\b)\d{1}  用的是后顾，查找 / 或者 - 或者 . 或者 : 或者 单词边界 或者 T 后面的一个数字
50.   // \d{1}(?=\/|-|\.|:|\b)   用的是前瞻，查找 / 或者 - 或者 . 或者 : 或者 单词边界  或者 T 前面的一个数字
51.   // replace 第二个参数"0$&" 匹配到的字符串前置补0
52.   // return str.replace(/(?<=\/|-|\.|:|\b|T)\d{1}(?=\/|-|\.|:|\b|T)/g, "0$&");
53.   let regExp = new RegExp("(?<=\/|-|\\.|\:|\\b|T)\\d{1}(?=\/|-|\\.|\:|\\b|T)", "g")
54.   return str.replace(regExp, "0$&");
55. }

复制代码

时间日期控件，表格内编辑时间控件可用 - (年-月-日)

1. <el-form-item ref="birthday" prop="birthday">
2.         <el-date-picker v-model="birthday" type="date" v-dateYMDFormat value-format="yyyy-MM-dd"> </el-date-picker>
3. </el-form-item>
4. <el-table-column prop="time" label="时间" width="140">
5.         <template slot-scope="scope">
6.                 <el-date-picker v-if="!!scope.row.addNew || !!scope.row.editRow" :size="elTableTreeFormSize" v-model="scope.row.time" type="date" v-dateYMDFormat value-format="yyyy-MM-dd" @keypress.enter.native="saveRow(scope.row)"></el-date-picker>
7.                 <span v-else>{{ scope.row.time }}</span>
8.         </template>
9. </el-table-column>

复制代码

1. // 第一种（和时间范围控件相同）
2. Vue.directive('dateYMDFormat', {
3.   inserted: function (el, binding, vnode) {
4.     const type = binding.value
5.     el.addEventListener('change', () => {
6.       let value = $($(el).children('input')[0]).val()
7.       const time = convertYMDRegExp(type, value);
8.       vnode.child.$emit('input', time);
9.     });
10.   }
11. });
12. // 第二种
13. Vue.directive('dateYMDFormat', {
14.   inserted: function (el, binding, vnode) {
15.     const type = binding.value
16.     const { context: _this } = vnode
17.     if (_this && _this._isVue) {
18.       const $this = $($(el).children('input')[0])
19.       $this.on('change', function () {
20.         let value = $this.val()
21.         const time = convertYMDRegExp(type, value);
22.         vnode.child.$emit('input', time);
23.       })
24.     }
25.   }
26. });

复制代码

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

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

复制代码

1. Vue.directive('daterangeYMDFormat', {
2.   inserted: function (el, binding, vnode) {
3.     const type = binding.value
4.     // 绑定 change 事件来更新绑定的数组
5.     el.addEventListener('change', () => {
6.       let value = []
7.       value[0] = $($(el).children('input')[0]).val()
8.       value[1] = $($(el).children('input')[1]).val()
9.       // const value = [$($(el).children('input')[0]).val(), $($(el).children('input')[1]).val()]
10.       const time = value.map(date => convertYMDRegExp(type, date))
11.       vnode.child.$emit('input', time);
12.     });
13.   }
14. });

复制代码

日期转换重要正则

1. value = value.replace(/[^0-9]/g, '')

复制代码

年-月-日/年-月-日 时:分/年-月-日 时:分:秒

1. if (value.length > 5 && value.length < 9) {
2.   value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 年-月-日,2021-03-12
3. } else if (value.length > 9 && value.length < 13) {
4.   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-12 09:50
5. } else if (value.length > 12) {
6.   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-12 09:50:30
7. } else {
8.   return ''
9. }

复制代码

年-月

1. // 年-月
2. if (value.length === 5) {
3.   value = value.replace(/^(\d{4})\D*(\d{1})\D*/, '$1-0$2') // 格式化输入格式,2021-03
4. } else if (value.length > 5) {
5.   value = value.replace(/^(\d{4})\D*(\d{1,2})\D*/, '$1-$2') // 格式化输入格式,2021-03
6. }

复制代码

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

老旧的转换方式，比力复杂

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

复制代码

1. 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, '')
2.       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);        })      }    }  }})

复制代码

---