vue2 -- el-time-picker开始时间小于结束时间（selectableRange设置）

已于 2023-03-02 15:12:26 修改
阅读量1.9k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 项目实操 文章标签： javascript vue.js ecmascript
于 2023-01-09 11:21:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44412840/article/details/128611418
本文介绍了如何在Vue2中实现el-time-picker组件的开始时间始终小于结束时间。通过定义方法并结合day.js库，动态调整可选时间范围，确保开始时间在结束时间之前。文章提供了两种实现方案，并给出了具体的效果说明和代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

思路：

使用picker-options属性定义selectableRange方法限制可选时间范围设置开始时间小于结束时间，其它时间段变灰色！

方案一：

//开始时间
<el-time-picker
	v-model="beginTime"
	:picker-options="{selectableRange:`00:00
了解本专栏 订阅专栏 解锁全文 超级会员免费看
el-DateTimePicker selectableRange精确到时间限制问题
cainiaohhhh的博客
05-31 2389
el-DateTimePicker selectableRange
elementUi时间选择器，开始时间不得大于结束时间限制到时分秒
weixin_43936040的博客
08-12 4656
时间日期选择器限制到某天的时分秒 需求： 限制时间只能选择今天以及今天之后，时分秒也只能是当前时间之后。 例如：2021:08:12 15:16:59 那选择时间的时候只能选择这个时间后的时间 提示：图片中红色部分都是过当前时间就不能选了。 代码示例 <el-date-picker @focus='datePickerFocus()' v-model="startTime" type="datetime" :picker-options="pickerOptions"
ElementUI TimePicker固定时间范围，开始时间小于结束时间
shykevin的博客
06-17 4482
一、概述 根据项目需求： 1. 开始时间必须小于结束时间，不能等于结束时间。 2. 结束时间必须小于开始时间，不能相等。 2. 开始时间和结束时间，最小间隔30分钟。 3. 时间范围从00:00~24:00 4. 默认范围08:00~18:00 二、代码实现 test.vue <template> <div> <el-form ref="params"...
ElementUI TimePicker时间范围，设置开始时间一直小于结束时间
weixin_49780389的博客
06-03 964
根据项目需求：1. 开始时间一直小于等于结束时间。2. 结束时间大于等于开始时间。
vue element-ui DateTimePicker 设置开始时间小于结束时间
金乌的博客
09-22 1067
【代码】vue element-ui DateTimePicker 设置开始时间小于结束时间。
使用Vue+element-ui日期时间选择器el-date-picker使开始时间小于结束时间
与其临渊羡鱼，不如进而结网。
11-29 4456
需求：（有效期）开始时间要小于结束时间 思路：使用el-date-picker组件的:picker-options属性，对组件进行约束。结束时间存在时，开始时间的组件框里不能选择大于结束时间的值；开始时间存在时，结束时间不能选择小于开始时间的值。 实现： :picker-options="startDatePicker" :picker-options="endDateP...
给el-date-picker 设置最小可输入时间
最新发布
07-12
我们需要给el-date-picker设置最小可输入时间，即用户不能选择小于某个时间点的时间。 在Element UI中，我们可以使用`picker-options`属性来设置禁用状态，其中有一个`disabledDate`函数可以用来控制哪些日期不可选...
vue 2.14.1版本通过picker-options实现5分钟间隔时间选择器
06-12
然而，在设置selectableRange时，每个时间段的格式为"HH:mm-HH:mm"，而且结束时间必须大于开始时间。实现步骤：1.在组件的data中定义pickerOptions对象，其中包含selectableRange属性，该属性是一个数组，每个元素是...
elementui datePicker结束时间大于开始时间，精确到时分秒
ly2983068126的博客
08-19 3057
研发中，大家肯定会遇到活动时间，结束时间大于开始时间，datepicker中type：datetime/datetimerange，可以很方便的实现。但是修改时开始时间不可编辑，结束时间可以编辑的情况下，datetime/datetimerange就很麻烦。 ------template----- <el-form-item label="" prop="startTime"> <el-date-picker v-model="ruleForm.sta..
vue3 el-time-picker 时间组件，开始时间小于结束时间，结束时间大于开始时间
想去呼伦贝尔大草原
11-12 411
参考官网代码，官网链接如下。
一个Vue2的datetimepicker组件
08-07
一个Vue2的datetimepicker组件
Element el-time-picker开始时间不小于结束时间
像一阵风
04-08 2389
时间控件与日期控件不同，其是通过selectableRange来控制时间选择范围 format为时分，但selectableRange只能解析时分秒，所以在变量之后拼接’:00’ <el-time-picker v-model="timeStart" :picker-options="{selectableRange:`00:00:00-${timeEnd ? timeEnd + ':0...
使用el-time-picker实现开始时间和结束时间选择
Smartiboy的博客
04-13 5541
1）问题 在工作中我们会经常使用el-time-picker组件来实现开始时间和结束时间的选择，但是element并没有直接提供给我们可以通过有范围限制的选择，而需要我们自己使用picker-options属性结合selectableRange参数实现时间选择框的选择范围规则 2）分析时间选择范围规则 开始时间选择框 如果有结束时间，则00:00:00-结束时间 没有结束时间，则00:00:00-23:59:59 结束时间选择框 如果有开始时间，则开始时间-23:59:59 如果没有开始时间，
el-date-picker实现开始时间小于结束时间
weixin_45907770的博客
04-15 436
html代码 <template> <div> <el-form> <el-form-item> <el-date-picker v-model="startTime" type="datetime" size="small" placeholder="请选择发送时间区间"
【亲测免费】 推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker
gitblog_00052的博客
04-19 2444
推荐一款实用的 Vue2 时间选择器组件 - vue2-timepicker 在前端开发中，时间选择器是常见的交互元素，用于输入或选择特定的时间。 是一个基于 Vue.js 2.x 的轻量级、高度可定制的时间选择器插件，它的出现为开发者提供了更为便捷和灵活的选项。 项目简介 vue2-timepicker 是由 Phoenix Wong 开发的一款 Vue 组件，它支持 24 小时制和 12 小时...
【亲测免费】 Vue2-Timepicker 教程
gitblog_00400的博客
08-08 1184
Vue2-Timepicker 教程 1. 项目介绍 Vue2-Timepicker 是一个基于 Vue.js 2.x 的轻量级时间选择器组件，它提供了高度的定制性和良好的用户体验。该组件支持24小时制和12小时制（AM/PM），并且拥有多种主题样式，适用于表单填充、日程安排、预订系统等多种场景。Vue2-Timepicker 设计简洁，API 易于理解和使用，同时拥有活跃的社区和持续的更新。 2...
elementUI中日期选择器，控制开始时间小于结束时间
weixin_42508745的博客
10-26 1781
此处做一个解释： ：picker-options=“updateTime” 为当前时间日期选择器特有的选项参考下表，而且可以用vue中的函数来做筛选，将data数据源中的updateTime给：picker-options使用 <el-form-item style='width: 100%;' label="开始日期:"> <el-date-picker style='width: 100%;' value-format="yyyy-MM-dd" form
vue开始时间小于等于结束时间，且开始时间小于等于系统时间，时间格式：年月日时分
weixin_43845550的博客
04-02 317
处理开始时间,若开始时间大于结束时间,开始时间值修改为结束时间。处理结束时间,若结束时间小于开始时间,结束时间值修改为开始时间。
vue element ui TimePicker 时间选择器校验结束时间大于起始时间 使用selectableRange 动态校验 （只针对“时”“分”“秒”）
热门推荐
让心在跳动
02-04 1万+
项目要求结束时间大于开始时间 （时，分，秒） element ui TimePicker 时间选择器 基本结构 <el-time-picker v-model="value1" :picker-options="{ selectableRange: '18:30:00 - 20:30:00' }" placeholder="任意时间点"> </el-time-picker> 代码如下 <el-time-picker .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Kingsaj

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值