I am attempting to implement a datepicker with time options from Element UI.
I am encountering an issue within the ElementUI component. It functions correctly if the type option is set as date, but throws an error with datetime.
Below is my code snippet and the error message.
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>Upon clicking on the element, here is the error I am encountering
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)