element中关于选择el-date-picker日期和el-time-picker时间范围的限制

本文主要介绍了在实际业务中如何使用picker-options对象来限制日期和时间的选择范围。针对用户操作的不确定性,提出了三种策略:1.0限制选择今日之前的日期;2.0根据学年动态设定日期范围,如2021-2022学年的上下学期;3.0设置任务截止时间的合理时间范围,避免过于即时的截止时间。通过监听用户选择并结合过滤器方法,确保了时间选择的合理性。

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

实际业务中经常会有选择对应的时间和日期,但是考虑到用户操作的不确定性,所以我们在写整个时候,会给出一个明确是时间范围限制 ,一般都是通过 picker-options 这个对象进行配置

1.0 限制今日之前的日期

在data中定义

2.0 根据具体需求限制可选的日期在某一个范围内

 我这实际的业务中的需求是:根据用户选择不同的学年,固定只能选择的日期范围。

例如选择了2021-2022 上学期,即2021年/9月1号——2022年1月31日,

               如2021-2022 下学期,即2022年/2月1号——2022年8月31日

 3.0 关于时间选择器中时间的可选范围

业务场景:

用户在发布某一项任务的时候,有一个截止的任务提交的日期,按照惯例,肯定是几个小时之后才收上来,或者几天后。如果没有时间的限制,用户今天下午3点发布的任务,截止时间就选择了今天下午3点,那么这项任务发布了就截止了没有什么意义,所以我们在让用户选择截止时间的时候,需要对时间范围做一个限制,限制用户极端操作

时间可选范围同样是根据 picker-options 这个对象进行配置

(1) 用户选择日期同样做了限制(见1.0 限制今日之前的日期)

 

 (2)对用户选择的日期进行侦听

(3) 过滤器中 sentTimeDate的方法

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值