el-date-picker 自定义输入格式和显示格式

• 输入 20210824，回车即可选择 2021-08-24（保存2021-08-24格式）
• 解决办法：（自定义指令，加到main.js即可）
  参考1：https://blog.csdn.net/weixin_44490109/article/details/114633843（moment报错，用注释掉的方法即可）
  参考2：https://www.cnblogs.com/senjer/p/13524032.html
• main.js（参考2为例）

 // 时间选择器 - 多种输入格式
 Vue.directive('dateFormat', {
    inserted: function (el, binding, vnode) {
      const { value: _obj } = binding
      const { context: that, data } = vnode
      const { expression: key } = data.model

      if(that && that._isVue) {
        const $this = $($(el).children('input')[0])

        $this.on('change', function() {
          let value = $this.val()

          // 中文日期
          if (!value.match(/\d{1,}/g)) {
            const chinaNum = ['〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
            const wList = [...value].map(w => {
              const idx = chinaNum.findIndex(p => p == w)
              return idx == -1 w : idx
            })
            value = wList.join('')
          }

          value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '--') // 格式化输入格式

          const time = value && value.constructor == String new Date(value) : value  // 转换时间格式
          let keys = key.split('.')

          // 自定义赋值
          if (_obj) {
            const { keys: keyList } = _obj
            keys = keyList
          }

          if (keys && keys.length >= 2) {
            const [key1, key2, key3, key4] = keys

            if (key4) {
              that[key1][key2][key3][key4] = time
            } else if (key3) {
              that[key1][key2][key3] = time
            } else {
              that[key1][key2] = time
            }
          } else {
            that[key] = time
          }
        })
      }
    }
  })

• html

                   <el-date-picker
                        v-date-format  // 输入格式自定义
                        v-model="ruleForm.birthday"
                        type="date"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd"      // 保存的日期格式       
                        :picker-options="option"
                        placeholder="出生日期" @change="birthdayChange">
                    </el-date-picker>

• data

        option: {
            disabledDate(time) {
                // 选择今日之前的日期（今天不可选）
                return time.getTime() > Date.now(); 
            }
        },

https://www.cnblogs.com/xjcjcsy/p/7977966.html

• methods

        // 选择出生日期
        birthdayChange () {
            this.patientAge = this.jsGetAge(this.ruleForm.birthday) + '岁' // 获取年龄
        },

/*根据出生日期算出年龄*/
jsGetAge(strBirthday) {
    var returnAge;
    var strBirthdayArr = strBirthday.split("-");
    var birthYear = strBirthdayArr[0];
    var birthMonth = strBirthdayArr[1];
    var birthDay = strBirthdayArr[2];

    var d = new Date();
    var nowYear = d.getFullYear();
    var nowMonth = d.getMonth() + 1;
    var nowDay = d.getDate();

    if (nowYear == birthYear) {
        returnAge = 0; //同年 则为0岁
    } else {
        var ageDiff = nowYear - birthYear; //年之差
        if (ageDiff > 0) {
            if (nowMonth == birthMonth) {
                var dayDiff = nowDay - birthDay; //日之差
                if (dayDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff;
                }
            } else {
                var monthDiff = nowMonth - birthMonth; //月之差
                if (monthDiff < 0) {
                    returnAge = ageDiff - 1;
                } else {
                    returnAge = ageDiff;
                }
            }
        } else {
            returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
        }
    }
    return returnAge; //返回周岁年龄
},

• 以上两个方法的缺陷：
  回车选中后，点击其他地方失去焦点后，v-model绑定的格式，会发生变化
  如：输入 19980126，回车后v-model绑定 1998-01-26，但是如果点击其他地方，失去焦点，v-model绑定的值为 Mon Jan 26 1998 08:00:00 GMT+0800 (中国标准时间)

• 缺陷解决办法：

判断v-model绑定值的类型，做时间格式转换
1998-01-26 —— string
Mon Jan 26 1998 08:00:00 GMT+0800 (中国标准时间) —— object

        // 选择出生日期
        birthdayChange () {
            if (!this.ruleForm.birthday) { // 清空日期的时候，清空年龄
                this.patientAge = null
                return
            }
            if (typeof this.ruleForm.birthday != 'string') {
                this.ruleForm.birthday = this.formatDate(this.ruleForm.birthday)
            }
            this.patientAge = this.jsGetAge(this.ruleForm.birthday) + '岁'
        },

// 日期或日期时间格式
    formatDate (date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }      
        return year + '-' + month + '-' + day
    },

• 备注（2021.11.8）

如果v-model是动态值
let keys = key.split('.') 这行会报错
例如：v-model="ruleForm[item.value]"

自定义指令这行代码，可修改为

 // let keys = key.split('.') 
let keys = key.split('[')
keys = [keys[0], vnode.context, item.value] // item.value可自定义，根据v-model绑定的值确定，仅限参考

tips：有朋友提了这个问题，所以补充一下