当前位置 博文首页 > 文章内容

    element-ui 时间选择器(el-date-picker) - 支持多种输入格式

    作者: 栏目:未分类 时间:2020-08-18 16:01:06

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    全局注册自定义指令

        // 时间选择器 - 多种输入格式
        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()
                value = value.replace(/^(\d{4})\D*(\d{1,2})\D*(\d{1,2})\D*/, '$1-$2-$3') // 格式化输入格式
    
                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
                }
              })
            }
          }
        })

    用法:v-date-format

    <el-date-picker
    v-date-format
    v-model
    ="form.applicantBirthday"
    type="date"
    placeholder="请选择日期时间"
    format="yyyy年MM月dd日"
    value-format="yyyy-MM-dd" :picker-options="pickerOptions"
    >
    </
    el-date-picker>

    自定义赋值

    <el-date-picker
     v-date-format="{ keys: ['additionalInfo', 'otherInfo', i, 'infoValue'] }"
     format="yyyy年MM月dd日"
     v-model="p.infoValue"
     type="date"
     placeholder="选择日期时间"
     @change="translateTimes(p,i)"
    > </el-date-picker>