1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > elementui中日期时间选择器 选择当天日期 显示的是当前时间 如果不是当天日期 则显示8点

elementui中日期时间选择器 选择当天日期 显示的是当前时间 如果不是当天日期 则显示8点

时间:2023-12-15 05:05:08

相关推荐

elementui中日期时间选择器 选择当天日期 显示的是当前时间 如果不是当天日期 则显示8点

当elementui中的属性无法满足需求时,可以使用原生js对组件进行修改,因为组件也是基于原生js进行封装的:

完整代码如下:

<template><div><el-date-pickerv-model="time1"type="datetime"popper-class="reset-popper":default-value="defaultTime"@focus="pickerChange"></el-date-picker></div></template><script>export default {data() {return {time1: '',defaultTime: '',}},methods: {pickerChange(val) {let that = this;if (document.getElementsByClassName('reset-popper').length < 1) {setTimeout(() => {let ele = document.getElementsByClassName('reset-popper')[0];ele.addEventListener('click', function (evt) {if (evt.target.parentNode.parentNode.parentNode.className == 'el-date-table__row') {let timeEleArr = ele.getElementsByClassName('el-date-picker__header')[0].getElementsByClassName('el-date-picker__header-label');let t = timeEleArr[0].innerText.split(' ')[0] + '-' + timeEleArr[1].innerText.split(' ')[0] + '-' + evt.target.innerText;let current = new Date().toLocaleDateString().split('/').join('-');if (current == t) {that.time1 = new Date();} else {that.time1 = new Date(t + ' 08:00:00');}}})}, 1000)}}}}</script>

需要注意一个问题就是,因为日期时间选择器展示下拉框的时候,可能会存在一些延迟,如果下拉框还没渲染出来就去获取dom对象是获取不到的,可以用setTimeout来解决,先设置一些时间让下拉框先渲染出来,再去执行获取dom的操作;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。