elementUI 时间选择器TimePicker，时间选不上的问题

最新推荐文章于 2025-11-12 09:49:13 发布
原创 最新推荐文章于 2025-11-12 09:49:13 发布 · 6.5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#elementui

本文探讨了在使用Element UI 的 TimePicker 组件时，时间选择无法正常启动的问题，关键在于timeValue 的初始值设定。正确的初始化包括设置为当前时间或具体日期范围，如timeValue: [newDate(), newDate(2021,8,24,9,40)]，而非空值或无效配置。
部署运行你感兴趣的模型镜像

elementUI 时间选择器TimePicker， 时间选不上的问题

    <el-time-picker v-model="timeValue" value-format="HH:mm" range-separator="-" is-range start-placeholder="开始时间" end-placeholder="结束时间"  placeholder="选择时间范围">
    </el-time-picker>

注意：时间选不上是因为timeValue初始值的问题，一定要给默认值。

定义变量：
错误 ： timeValue:[],
正确①： timeValue:[new Date(new Date()),new Date(new Date())] （默认当前时间）
正确②： timeValue:[new Date(2021, 8, 24, 9, 40), new Date(2016, 8, 24, 10, 24)]
正确③： timeValue:null

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

Element-UI 时间选择器 el-time-picker 禁用 秒 选项
一碗清深的博客
07-06 5053
时间选择器 el-time-picker 禁用 秒 选项、与日期组合。
ElementUI日期时间选择器限制时间范围,禁止此刻之前的所有时间选择(精确到，时、分、秒)、pickerOptions、日期选择器范围选择
疑问 搜索 动手 解决 记录
04-26 1万+
需求:可选择的时间大于当前时间,不符合条件的全部禁用 以下实现方式可精确到年、月、日、时、分、秒 HTML <el-form-item label="盘点开始时间" prop="checkStartTime"> <el-date-picker type="datetime" placeholder="请选择开始时间" style="width: 100%" clearable format="yyy
Element-UI中el-time-picker时间选择器无法选择
Anorry的博客
03-25 2250
解决Element-UI中el-time-picker无法选择时间的问题
【亲测免费】 推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker
最新发布
gitblog_00052的博客
11-12 2662
在前端开发中，时间选择器是常见的交互元素，用于输入或选择特定的时间。 是一个基于 Vue.js 2.x 的轻量级、高度可定制的时间选择器插件，它的出现为开发者提供了更为便捷和灵活的选项。 ## 项目简介 vue2-timepicker 是由 Phoenix Wong 开发的一款 Vue 组件，它支持 24 小时制和 12 小时制（AM/PM），提供多种主题样式，并且可以无缝集成到你的 Vue
关于ElementUI 的 el-time-picker 组件分钟无法选择的问题
黑胡子大叔的博客
04-28 3895
在用el-time-picker组件时，遇到分钟无法通过滑动修改的情况，默认卡在04分钟，键盘可以修改 错误代码如下： <el-time-picker v-model="addForm.meetingTime" style="width: 100%;" is-range value-format="HH:MM" format="HH:MM" range-separator="至" start-placeholder.
[element-ui] el-time-picker时间选择器无法选择
weixin_40645812的博客
07-29 419
登录后复制 <el-time-picker is-range v-model="businessTimeInfo" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选...
当使用element中的日期选择器el-time-picker，时间选不上
m0_52244931的博客
11-21 4816
当使用 el-time-picker 时 v-model绑定的 formInline.value1 默认值要是 为空数组 [] ,则这个时间选择器 滑动选择时间是有问题的，可以在数组中设置默认时间，解决这个问题 ，但是 当这个组件时 查询框的时候 首次是不应该存在默认值的 这时候 就可以 将 value1 初始化 为 null
精选资源
仿照ElementUI中的TimePicker实现的WPF 版时间选择器（TimePicker）
03-25
总结，实现一个仿照ElementUI TimePicker的WPF版时间选择器，主要涉及WPF的UI设计、C#编程、MVVM模式、数据绑定以及事件处理。通过这样的实践，开发者可以更好地理解和运用WPF的强大功能，同时也能学习到前端UI设计...
WPF时间选择器仿ElementUI TimePicker实现
知识点三：时间选择器（TimePicker）控件 TimePicker是一个常用在各种应用程序中的UI控件，它允许用户从一个可视化的界面上选择时间，这通常包括小时和分钟的选择。在Web前端开发中，ElementUI是一个流行的Vue.js...
精选资源
时间选择器实现精确到时分禁用多个时间段并能动态更新禁用时间段
03-10
时间选择器实现精确到时分禁用多个时间段并能动态更新禁用时间段
elementui时间选择器怎么调整层级
08-21
Element UI是一个基于Vue.js的前端UI框架，其中提供了丰富的组件，包括时间选择器（TimePicker）。时间选择器的层级调整通常指的是改变其内部时间选择层级的顺序，比如可以设置为按小时、分钟和秒的顺序选择，也可以...
elementUI timePicker
qq_39933800的博客
03-09 353
element timepicker
element ui TimePicker 时间选择器时间段配置
m0_62359005的博客
07-18 636
多个时间段用['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']思路：休息时间要在开始上班和下班中间，结束时间要在开始休息时间到下班时间之间。开始休息，结束休息，开始上班，结束上班的时间。
Element UI-TimePicker时间选择器只显示小时和分钟
itmacy的博客
10-31 5437
控制只显示时间控件的小时和分钟，并且对时间进行格式化。
ElementUI组件el-time-picker的使用（只显示小时，分钟）
m0_37322682的博客
06-01 6455
ElementUI组件el-time-picker的使用，只显示小时和分钟，去掉秒
element 时间组件--选择不了时间
weixin_47711284的博客
05-25 3421
问题 今天在做项目测试的时候突然发现element时间组件修改时间报错，无法选择 然后突然懵逼，增加的时候都是好好的，咋就编辑报错了？ 排查过程 经过排查发现是格式化的问题造成的，后端说传过去的时间是格式是：yyyy/MM/dd hh:mm:ss 结果他们传回来的格式是：yyyy-MM-dd hh:mm:ss 看到这里就是豁然开朗，格式不匹配造成的原因 解决 方法1：前端直接格式化为后端数据的格式 <el-date-picker style="width:100%"
关于elementui的TimePicker、DatePicker、DateTimePicker再开发使用中遇到的问题
hunter
12-28 1483
关于elementui的TimePicker、DatePicker、DateTimePicker再开发使用中遇到的问题 最近在vue项目中使用elementui 的TimePicker、DatePicker、DateTimePicker这三个组件的时候，我发现使用范围选择的时候选择器中间的那个字有一少半显示不出来，为此在这记录下这个问题 官网例子 <template> <div class="block"> <span class="demonstration"&g
ElementUI中el-time-picker实现选择时间并格式化显示和传参的格式
热门推荐
BADAO_LIUMANG_QIZHI的博客
08-24 2万+
场景 要实现在前端选择一个一天中的时间并传递到后端。 实现效果如下 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 <el-form-item label="打卡时间" prop="dksj"> <el-time-picker v-model="form.dksj" format = 'HH:m...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值