Element UI el-date-picker设为datetime类型时触发elForm未定义报错

问题详情 #

使用Element UI的el-date-picker组件时，type="date"可正常工作，但设置为type="datetime"时，点击组件会触发内部报错。

代码实现 #

脚本部分 #

import { cloneDeep } from 'lodash';

export default {
  name: 'actions',
  components: {},
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      indentData: {
        reported_at: '',
      },
    };
  },
  computed: {
    validToPickerOptions() {
      const endOfDay = new Date(new Date().setHours(23, 59, 59, 999));
      return {
        disabledDate(time) {
          return (time >= endOfDay);
        },
      };
    },
  },
  methods: {
    reportMarkReported() {
      console.log('this.indentData', this.indentData);
      this.$emit('save-report-release', this.indentData);
    },
  },
  created() {
    this.indentData = cloneDeep(this.data);
  },
};

模板部分 #

<template>
  <div>
  <div class="action">
    <button @click="reportMarkReported">
      Submit
    </button>
  </div>
  <div>
    <el-date-picker
      v-model="indentData.reported_at"
      type="datetime"
      format="dd MMM 'yy hh:mm A"
      placeholder="Pick a Date"
      size="small"
    />
    </div>
  </div>
</template>

报错信息 #

vue.esm.js?b66f:1741 TypeError: Cannot use 'in' operator to search for 'elForm' in undefined
at resolveInject (vue.esm.js?efeb:4649:1)
at initInjections (vue.esm.js?efeb:4619:1)
at Vue._init (vue.esm.js?efeb:4710:1)
at new VueComponent (vue.esm.js?efeb:5836:1)
at createComponentInstanceForVnode (vue.esm.js?b66f:4310:1)
at init (vue.esm.js?b66f:4131:1)
at createComponent (vue.esm.js?b66f:5608:1)
at createElm (vue.esm.js?b66f:5555:1)
at createChildren (vue.esm.js?b66f:5682:1)
at createElm (vue.esm.js?b66f:5584:1)

vue.esm.js?b66f:591 [Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading '$el')"

TypeError: Cannot read properties of undefined (reading '$el')
at Vue.eval (element-ui.common.js?bc95:18396:1)
at Array.eval (vue.esm.js?b66f:1837:1)
at flushCallbacks (vue.esm.js?b66f:1758:1)

解决方案 #

1. 修复v-model初始值类型 #

datetime类型选择器要求绑定值为Date对象或符合格式的字符串，空字符串会导致组件内部解析异常，修改初始值：

data() {
  return {
    indentData: {
      reported_at: null, // 替换空字符串为null
    },
  };
},

同时在created钩子中，若this.data.reported_at为空，也要确保赋值为null而非空字符串。

2. 检查版本兼容性 #

该报错常出现在Element UI与Vue版本不匹配的场景，确保使用适配Vue 2.x的Element UI版本（推荐2.15.x系列）。

3. 确认组件注册正确 #

如果是按需引入Element UI，需在当前组件中正确注册DatePicker：

import { DatePicker } from 'element-ui';
export default {
  components: {
    ElDatePicker: DatePicker
  },
  // 其他代码
}

4. 验证格式字符串合法性 #

当前format属性使用MMM（英文月份缩写），若环境不支持该格式会引发异常，可临时改为MM（数字月份）测试是否为格式问题：

<el-date-picker
  v-model="indentData.reported_at"
  type="datetime"
  format="dd MM 'yy hh:mm A"
  placeholder="Pick a Date"
  size="small"
/>

内容的提问来源于stack exchange，提问作者devil-0-per