element-ui的日期选择器(选择任意时间都会提交前一天的时间)

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

#1024程序员节 #css3 #前端框架 #前端 #elementui #vue.js

问题一:在提交表单的时候,选择日期的时候,提交上去的总是前一天的日期

问题就在于这个表单时间的验证时间

报的这个错误删除tape就解决了  提交上的时间也是准确的

小叶不耶
关注
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 8607
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
elementUI日期 el-date-picker 限制选择当前选中的前一天或后一天
程序媛的博客
01-13 1249
elementUI日期限制，当点击了一个日期，再限制其他日期。
element 中的日期选择器 DatePicker在选择日期时为什么会是前一天的16:00？
weixin_42293937的博客
10-26 929
在DatePicker组件中添加value-format属性，并将其值设置为"yyyy-MM-dd"。这样，DatePicker将只显示日期，而不显示时间，从而避免了时区问题。
ElementUI中DatePicker日期选择器组件日期显示错误（显示的是前一天）
年少不知曲中意,再听已是曲终人
05-18 2970
我们只需在el-date-picker标签中添加value-format属性即可！
＜el-date-picker＞日期显示错误，显示选择的前一天
weixin_72084279的博客
06-28 924
原因：这个问题可能是由于时区差异导致的。当你选择一个日期时，它会根据你所在的时区进行存储。然后，当显示这个日期时，它会根据你的浏览器所在时区进行转换。因此，可能会出现选择的日期和显示的日期相差一天的情况。问题：使用 <el-date-picker>选择日期，但是渲染的是选择的前一天，解决方案：所以确定是由于时区导致的日期不一致，解决办法就是在日期控件中加入。value-format=“yyyy-MM-dd”，问题解决。
element日期选择今天之前
fairyfree的博客
07-21 774
日期选择今天之前
＜el-date-picker＞日期选择器保存后时间显示提前一天问题
TC0221的博客
12-09 619
【代码】＜el-date-picker＞日期选择器保存后时间显示提前一天问题。
element-ui 时间选择器限制范围的实现（随动）
10-17
最后，文章中提到了一些标签，例如“element日期选择器”和“element-ui时间选择器限制”，这些标签帮助我们快速定位与该组件相关的内容。在实际开发中，利用好这些组件和它们提供的方法，可以大大提升开发效率，并...
ELEMENT-UI 日期范围选择控件，限制只能选择30天
江湖行骗老中医
09-05 3469
问题描述 element-ui 日期选择器 （daterange类型）选择日期范围为一个月，选择的时间前后只能选择一个月内日期 知识点 下面是具体实现代码 实现element ui 日期空间，前后范围为30天内 <el-date-picker v-model="value1" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期" val
Element-UI自学实践（一）
weixin_40017062的博客
08-13 691
Element-UI自学实践
Element-UI布局与前端工程化：10个实战技巧，让你的项目更加灵活
![Element-UI布局与前端工程化：10个实战技巧，让你的项目更加灵活](https://blog.flutterflow.io/content/images/2022/06/container-dynamic-height.png) 参考资源链接：[Element...Element-UI 是基于 Vue 2.0 的一套
Vue element 日期获取展示今天日期
maoxiaohei_的博客
11-09 2261
element 日期获取当前日期。
element获取当前时间
weixin_55639808的博客
07-10 1464
element获取当前时间,通过方法获取，然后返回的是一个时间戳，是否处理解注释。
关于使用vue+elementUI使用日期选择器控件el-date-picker选择时间上传到后台减少一天问题
weixin_45618937的博客
05-31 2022
使用vue+elementUI使用日期选择器控件el-date-picker选择时间上传到后台发现日期往前了一天 解决：value-format=“yyyy-MM-dd”
【Vue+ElementUi的日期选择器选择的日期是前一天的T16:00:00.000Z】
qq_52033991的博客
11-02 2298
vue+elementui里的日期选择器选择日期是前一天
ElementUI 时间选择器，显示默认时间为当前时间的前一天
weixin_42365757的博客
03-10 5752
项目需求：ElementUI 时间选择器，显示默认时间为当前时间的前一天 element框架时间选择器，默认显示时间为：当前日期的前一天 1、html结构： <el-form ref="formData" :model="formData" label-width="100px"> <!--日期板块--> <el-form-item label="活动时间" style="margin-left:29px">
【vue3 Element-plus 日期控件DatePicker 回显的日期是前一天】
qq_34598215的博客
02-05 709
vue3 Element-plus 日期控件DatePicker 回显的日期是前一天
vue 2.14.1版本通过picker-options实现5分钟间隔时间选择器
最新发布
06-12
<think>我们正在使用Vue2.14.1和ElementUI（假设是2.x版本）来实现一个时间选择器，要求时间选择间隔为5分钟。在ElementUI的日期时间选择器（el-date-picker）中，我们可以使用picker-options属性来配置，特别是利用其selectableRange属性来设置可选择的时间范围，并通过动态生成这个范围来实现5分钟间隔。思路：1.在picker-options中定义selectableRange属性，该属性是一个字符串数组，每个字符串表示一个可选的时间段，格式为"HH:MM-HH:MM"。2.我们需要生成一天中所有以5分钟为间隔的时间点，然后每两个连续的时间点构成一个可选时间段（注意：最后一个时间段是到24:00）。3.但是，selectableRange要求每个时间段是连续的，且覆盖整个我们希望可选择的时间段（通常是一整天），所以我们生成一个包含多个时间段的数组，每个时间段的长度为5分钟。注意：由于时间选择器的时间间隔设置，我们可能需要将整个一天分成多个5分钟的时间段。但是，实际上ElementUI的时间选择器在设置了selectableRange后，会限制用户只能选择这些时间段内的时间点。然而，如果我们设置的时间段不是连续的，那么中间会有间隔无法选择。所以我们需要设置连续的时间段，即00:00-00:05,00:05-00:10,...,23:55-00:00（第二天零点，但通常我们只到23:55-24:00）。但是，注意：ElementUI的selectableRange不允许重叠，而且必须连续。然而，如果我们设置成每5分钟一个区间，那么用户只能选择每个5分钟的开始时刻（例如00:00,00:05），而在时间选择器的界面上，中间的时间是不可选的。这并不符合我们的需求，因为我们希望用户能在任意5分钟间隔上选择，但实际上我们希望的是时间点以5分钟为步进。实际上，ElementUI没有直接设置步进的属性，但是我们可以通过设置selectableRange为整个时间范围（比如00:00到24:00），然后通过format来控制显示和选择的步进？这是不行的。正确做法：通过selectableRange设置可选的时间段为多个连续的时间段，每个时间段为5分钟，这样在时间选择器的时间部分就会只显示这些可选时间段内的时刻，而其他时刻为灰色不可选。但这样会导致用户每次只能选择每个5分钟的开始时刻，而无法选择时间段中间的时刻（因为中间的时刻不在任何一个时间段内）。这正好符合我们的要求，因为5分钟间隔，我们只允许用户选择0分、5分、10分、...、55分。因此，我们可以将一天的时间按5分钟分成多个时间段，每个时间段的开始和结束分别是：00:00-00:0500:05-00:10...23:55-24:00但是注意，结束时间24:00在ElementUI中可能不被允许，所以我们可以使用23:55到23:59:59，或者用第二天00:00来表示24:00。不过，ElementUI的时间选择器使用的是24小时制，且可以接受结束时间为24:00（它等同于00:00）。然而，在设置selectableRange时，每个时间段的格式为"HH:mm-HH:mm"，而且结束时间必须大于开始时间。实现步骤：1.在组件的data中定义pickerOptions对象，其中包含selectableRange属性，该属性是一个数组，每个元素是一个时间段的字符串。2.通过一个方法（如computed属性或method）来生成这个数组。由于这个数组在初始化后不会改变，我们可以在created或mounted钩子中生成，或者直接在data中通过函数生成。注意：Vue2.x的响应式系统要求，如果我们在data中直接使用一个函数返回数组，那么这个函数不会响应式更新。所以如果我们希望动态改变间隔（比如变成10分钟），需要重新生成数组并更新pickerOptions对象。但这里我们固定5分钟。示例代码：我们定义一个方法，生成5分钟间隔的时间段数组：-从00:00开始，到24:00结束。-每5分钟作为一个间隔，生成一个时间段字符串，例如"00:00-00:05","00:05-00:10",...,"23:55-24:00"注意：24:00在ElementUI中通常表示第二天的00:00，但我们可以直接用"24:00"字符串（ElementUI支持）。但是，根据ElementUI官方文档，时间格式为24小时制，并且结束时间不能小于开始时间。具体实现：生成时间段数组的函数：lettimes=[];conststep=5;//5分钟for(lethour=0;hour<24;hour++){for(letminute=0;minute<60;minute+=step){//当前时间点的字符串，例如：&#39;01:05&#39;letstart=`${hour.toString().padStart(2,&#39;0&#39;)}:${minute.toString().padStart(2,&#39;0&#39;)}`;//计算下一个时间点letnextMinute=minute+step;letnextHour=hour;if(nextMinute>=60){nextMinute=0;nextHour+=1;}letend=`${nextHour.toString().padStart(2,&#39;0&#39;)}:${nextMinute.toString().padStart(2,&#39;0&#39;)}`;//如果到了24:00，我们直接写24:00（最后一段）if(nextHour===24){end=&#39;24:00&#39;;}times.push(`${start}-${end}`);}}但是，上面的循环在hour=23时，如果minute=55，那么下一个时间点就是24:00，所以我们可以这样处理。注意：最后一段是"23:55-24:00"然而，我们也可以使用一个更简单的方法：从0分钟开始到1440分钟（一天），步进5分钟，然后每次计算当前分钟数对应的开始时间和结束时间。我们选择使用分钟数循环：lettimes=[];consttotalMinutes=24*60;conststep=5;for(letminutes=0;minutes< totalMinutes;minutes+=step){letstartHour=Math.floor(minutes/60);letstartMinute=minutes%60;letstartStr=`${String(startHour).padStart(2,&#39;0&#39;)}:${String(startMinute).padStart(2,&#39;0&#39;)}`;letendMinutes=minutes+step;if(endMinutes>totalMinutes){endMinutes=totalMinutes;}letendHour=Math.floor(endMinutes/60);letendMinute=endMinutes%60;letendStr=endMinutes===totalMinutes?&#39;24:00&#39;:`${String(endHour).padStart(2,&#39;0&#39;)}:${String(endMinute).padStart(2,&#39;0&#39;)}`;times.push(`${startStr}-${endStr}`);}这样我们就生成了所有的时间段。但是，注意：在时间选择器中使用时，我们可能希望禁用过去的时间？这里只要求5分钟间隔，所以暂时不考虑禁用过去时间。在pickerOptions中，我们可以这样写：pickerOptions:{selectableRange:this.generateTimeRanges()//调用生成时间段数组的方法}但是，这样写的话，generateTimeRanges方法需要在data中定义，但是data中不能直接调用方法（因为this指向问题），所以我们可以在created中初始化pickerOptions，或者在computed中定义pickerOptions。由于这个时间段数组是固定的，不会随响应式数据改变，我们可以选择在created钩子中生成，或者在data中通过一个函数返回（注意：如果使用data中的函数，需要确保不会在模板中多次调用，因为每次调用都会重新计算）。这里为了简单，我们在data中通过一个方法来生成：data(){return{timeValue:null,pickerOptions:{selectableRange:this.generateTimeRanges()}};},methods:{generateTimeRanges(){//生成时间段的代码//...如上面代码returntimes;}}但是，注意：如果generateTimeRanges依赖一些响应式数据（比如间隔step可能动态改变），那么我们需要将其设计为计算属性或监听step变化更新pickerOptions。但这里固定5分钟。完整示例代码：另外，我们使用的时间选择器类型是&#39;datetime&#39;（日期和时间），所以type=&#39;datetime&#39;下面是一个完整的组件示例：</think> 在 Vue 2.14.1 中使用 Element UI 实现 **5分钟间隔**的时间选择器，需要利用 `picker-options` 的 `selectableRange` 属性。以下是完整的实现方案： ### 解决方案代码 ```html <template> <el-date-picker v-model="selectedTime" type="datetime" placeholder="选择时间" :picker-options="timeOptions" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"> </el-date-picker> </template> <script> export default { data() { return { selectedTime: null, timeOptions: { selectableRange: this.generateTimeRange(5) // 设置5分钟间隔 } }; }, methods: { // 生成基于分钟间隔的时间段 generateTimeRange(minuteInterval) { const ranges = []; const totalMinutes = 24 * 60; // 全天总分钟数 for (let min = 0; min < totalMinutes; min += minuteInterval) { const hour = Math.floor(min / 60); const minute = min % 60; // 格式化为HH:mm const timeStr = `${hour.toString().padStart(2, &#39;0&#39;)}:${minute.toString().padStart(2, &#39;0&#39;)}`; // 创建时间范围段 ranges.push(`${timeStr} - ${timeStr}`); } return ranges; } } }; </script> ``` ### 关键点说明 1. **时间间隔实现原理**： - 将全天分为 24×60=1440 分钟 - 通过循环以指定间隔(5分钟)切割时间点 - 每个时间点格式化为 `HH:mm` 字符串 - 使用数学公式计算时间段： $$ \text{小时} = \lfloor \frac{\text{累计分钟}}{60} \rfloor,\quad \text{分钟} = \text{累计分钟} \mod 60$$ 2. **selectableRange 工作机制**： - 每个时间段使用 `起始时间 - 结束时间` 格式 - 当起始=结束时，强制用户只能选择该特定时刻 - 生成的5分钟间隔示例： ```js [&#39;00:00 - 00:00&#39;, &#39;00:05 - 00:05&#39;, &#39;00:10 - 00:10&#39;, ... &#39;23:55 - 23:55&#39;] ``` 3. **格式控制**： - `format` 和 `value-format` 确保绑定值的格式一致性 - 使用 `padStart(2,&#39;0&#39;)` 保证单数补零(如05而不是5) ### 响应式处理技巧 若需动态修改间隔，使用计算属性+强制刷新： ```javascript computed: { timeOptions() { return { selectableRange: this.generateTimeRange(this.interval) } } }, methods: { changeInterval(val) { this.interval = val; this.refreshKey++; // 强制重建组件 } } ``` ```html <el-date-picker :key="refreshKey"> ``` ### 常见问题解决 1. **Safari兼容性问题**： ```javascript // 添加时区处理 const date = new Date(value); const timezoneOffset = date.getTimezoneOffset() * 60000; const adjustedDate = new Date(date.getTime() + timezoneOffset); ``` 2. **UI显示优化**： ```css /* 高亮显示间隔时间点 */ .el-time-spinner__item.active { font-weight: bold; color: #409EFF; } ``` 3. **禁用历史时间**： ```javascript timeOptions: { disabledDate(date) { return date < Date.now() - 86400000 // 禁用1天前的日期 }, selectableRange: this.generateTimeRange(5) } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值