element-plus UI 中的el-date-picker组件在vue3项目中时间选择无反应解决方案

已于 2022-09-29 11:15:55 修改
阅读量2.9k 收藏 1
点赞数 1
文章标签： vue.js javascript 前端
于 2022-09-29 11:12:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxh0816/article/details/127103352
版权

目录

问题描述:

 解决办法:

问题描述:

这次的项目,是vue3+element-plus写的.今天突然发现,时间选择器里的时间点击没反应.

 解决办法:

百度了以后发现原因是,element-plus版本太低了.我们是需要升级element-plus的版本就好了.

可以到package-lock.json文件中查看element-plus版本号.

1.先卸载版本低的element-plus

 npm uninstall element-plus

2.安装最新的element-plus 

npm install element-plus --save

3. 重新启动项目

npm run dev

爱前端的小周同学
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 - Element Plus 日期选择器 el-date-picker 设置默认值功能，使用 default-value 对选择器的默认日期进行设置（解决设置默认值后不起作用、无效怎么办）
王佳斌
03-05 4125
vue3，element plus，el-date-picker，日期选择器，DatePicker，element-plus日期选择器default-value用法，日期选择器default-value设置默认值不起作用，elementPlus 日期选择器default-value属性详细教程，default-value赋值new Date没有变化不生效怎么办，设置后不生效，el-date-picker设置default-value后没有生效怎么办，日期选择器打开时默认显示的时间，设置默认不起作用，怎么一打
vue-ctk-date-time-picker:VueJS组件选择日期和时间，包括范围模式
04-13
VueCtkDateTimePicker 用于选择日期（可用范围模式）和时间的Vue组件 本文档适用于v2。*。 查找v1文档暗模式演示版安装纱yarn add vue-ctk-date-time-picker NPM npm i --save vue-ctk-date-time-picker用法ES6模块/...
当使用element中的日期选择器el-time-picker，时间选不上
m0_52244931的博客
11-21 4340
当使用 el-time-picker 时 v-model绑定的 formInline.value1 默认值要是 为空数组 [] ,则这个时间选择器 滑动选择时间是有问题的，可以在数组中设置默认时间，解决这个问题 ，但是 当这个组件时 查询框的时候 首次是不应该存在默认值的 这时候 就可以 将 value1 初始化 为 null
element-plus中el-date-picker相关问题
最新发布
AM1n98的博客
05-09 558
以前都用最近在做一个Vue3新项目，也要实现类似功能，但突然发现pickerOptions不好用了，控制台也没有报错，郁闷坏了。由于之前是在Vue2中使用的pickerOptions属性，于是猜测Vue3是不是又把属性改名换姓了，查了一下果然啊。
VUE + ElementUI el-date-picker选中日期没反应
热门推荐
LEON_RAY
10-20 1万+
添加代码： @input="$forceUpdate()" 例： <el-date-picker v-model="value" type="date" value-format="yyyy-MM-dd" @change="getList" @input="$forceUpdate()" placeholder="选择日期"> </el-date-picker>
elementUI 中 date-picker 的使用的坑（vue3）
m0_54355172的博客
10-22 1933
日常贴
Vue3+element-plus日期选择器 el-date-picker 设置可选最小时间方法
qq_39111074的博客
09-08 6195
vue3 element-plus 时间选择器设置最小可选时间方法
vue3使用表单el-form的坑+el-input无法输入+el-date-picker选择时间不能赋值
wenhui的博客
09-14 3675
遇到一个大坑，弄了好几个小时才找到问题。 vue3使用el-form的时候，如下代码，会导致输入框无法输入，无法赋值，选择框无法选择 <el-form class="my-form" ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el.
el-date-picker 禁用日期后，【此刻】按钮点击无反应
qq_40896145的博客
07-03 2409
使用el-date-picker组件，禁止选择未来日期后，【此刻】按钮点击无反应。
解决Element中el-date-picker组件不回填的情况
01-21
因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有实现回填！ 2.问题分析 时间信息没有回填...
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
最全 element UI el-date-picker组件换色（less）
11-23
element UI el-date-picker组件样式更改 popper-class="down-time" 原码是body下的弹出器
vue3项目 Element-Plus DatePicker日期选择器组件限制只能选择7天内
11-13 1703
【代码】vue3项目 Element-Plus DatePicker日期选择器组件限制只能选择7天内。
vue3按需导入element-plus报错Module not found: Error: Can‘t resolve ‘element-plus/es/components/button/
m0_37922443的博客
05-16 3024
Module not found: Error: Can't resolve 'element-plus/es/components/button/style/css'
element日期回显 、选择不生效问题
weixin_38999134的博客
02-07 1367
<el-form-item label="维护时间" prop="oncetime" v-if='onetime' > <el-date-picker :clearable='false' v-model="planForm.oncetime" type="date" :picker-options="pickerOptions" @input="changeontime" value-format="yyyy-MM-dd" place.
el-date-picker限制选择的日期段，设置picker-options失效
IT民工
12-09 3847
el-date-picker限制选择的日期段，设置picker-options失效
element UI之 el-date-picker 无法选择当前日期
~牧马~
11-30 1064
width260px</问题所在之处。
el-date-picker使用中遇到无法点击叉号清除，且不清除状态下无法重新选择时间的问题
weixin_54938190的博客
02-08 885
el-date-picker使用中遇到无法点击叉号清除，且不清除状态下无法重新选择时间的问题
el-date-picker点击无反应
08-20
el-date-picker点击无反应可能是由于禁止选择未来日期后，【此刻】按钮没有响应引起的。解决此问题的方法是给picker-options禁用传值-8.64e7，即将当前日期减去24小时，以确保可以选择到当天。具体代码如下： disabledDate(date) { return date.getTime() - 8.64e7 > Date.now() - 24 * 60 * 60 * 1000; } 另外，还需要确保el-date-picker组件的value-format属性设置为"yyyy-MM-dd"，并添加@input="input()"，具体代码如下： <el-date-picker v-model="Date" value-format="yyyy-MM-dd" @input="input()"></el-date-picker> 在methods中添加input方法，代码如下： input() { this.$forceUpdate(); } 通过以上方法，可以解决el-date-picker点击无反应的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-date-picker 禁用日期后，【此刻】按钮点击无反应](https://blog.csdn.net/qq_40896145/article/details/131514347)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue中使用this.$forceUpdate解决el-date-picker点击不显示问题](https://blog.csdn.net/Coludidi/article/details/126606005)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值