vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期

已于 2024-05-14 16:28:05 修改
阅读量1.6k 收藏 3
点赞数 3
文章标签： vue3 elementui el-date-picker
于 2024-05-14 16:27:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dnn01/article/details/138859823
版权

记录一个小tips之项目中遇到使用vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期，只需要设置一个属性值:disabled-date="disabledDate"就可以了。

在这里插入图片描述

<el-date-picker v-model="ruleForm.tIntendedDateofDeparture" value-format="YYYY-MM-DD" type="date"
 :disabled-date="disabledDate" placeholder="Pick a date" clearable style="width: 100%" />
 。。。。。。
 。。。。。。
 const disabledDate = (time: Date) => {
    return time.getTime() < Date.now() - 8.64e7// - 8.64e7是今天可以选
}
Dnn01
关注
vue - elementUI组件库＜el-date-picker＞日期选择器限制 “只能选当天和当天以后“ 的日期，限制用户只能选择今天以后(包括今天)的日期时间（详细示例源码，一键复制开箱即用）
高级前端工程师
11-19 3013
vue，elementUI组件库，el-date-picker限制只能选当天和当天之后的日期，vue+elementUI怎么限制只能选择今天和以后的日期时间，vue饿了么组件库的日期el-date-picker限制只能选当天与当天之后，怎么限制哪些日期不能选，如何限制今天以前的日期和时间禁止用户选择，怎么限制哪些日期时间不能选，element的el-date-picker组件实现只可选择当前之后的时间,包括时分，只能选择当前天和以后的日期和时间，时间也不能选今天之前的，vue element-ui el-d
时间控件el-date-picker限制可选当前日期前七天
weixin_39547000的博客
09-10 2237
<el-date-picker v-model="value1" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > &.
基于Vue3的Element UI日期选择器：限定选择今天及以后日期
最新发布
qq_62685154的博客
09-26 851
通过disabled-date属性，我们可以灵活地控制Element Plus日期选择器中可选择的日期范围。本文示例展示了如何禁用今天之前的所有日期，确保用户只能选择今天及以后的日期。希望这个示例对你有所帮助，如果有任何问题或需要进一步的定制，欢迎随时留言交流。t=O83ADatePicker 日期选择器https://element-plus.org/zh-CN/component/date-picker.html#%E5%B1%9E%E6%80%A7。
el-date-picker 循环设置disabled-date
feiyupang的博客
08-09 605
使用vue3+element-plus这是一个多行的table,每行都有一个启动时间和完成时间，完成时间须大于启动时间，完成时间需要设置各行的disabled-date。
element 库 date-picker 的 disabledDate 使用，大于当前日期不可选
weixin_45734686的博客
11-09 1552
html <el-date-picker v-model="birthday" type="date" value-format="timestamp" :picker-options="pickerOptions"> </el-date-picker> script data() { return { pickerOptions: { disabledDate: item => {
el-date-picker自定义disabledDate，开始日期不能小于结束日期，两个选择框之间的互相限制
weixin_43951592的博客
05-07 3018
简单的例子，要求开始日期不能小于结束日期（用禁用选择的方式） <el-date-picker value-format="yyyy-MM-dd" size="mini" v-model="date1" type="date" placeholder="开始日期" :picker-options="pickerOptions1"> </el-date-picker> <el-date-picker value-format="yyyy-MM-d
Vue 中使用 el-date-picker 限制只能选择当天、当天之前或当天之后日期的方法详解
LJL's博客
05-11 1804
网上很多都是不完整的，我这里发布一个完整的表示可选择当天时间（注：小于当前时间，- 8.64e7 则是禁用日期不包含当前日，若大于当前日期， 8.64e7 则是禁用日期包含当前日）
ElementUI中 el-date-picker 日期选择器，只能选择今天以后 的日期
m0_71185989的博客
08-02 510
在 el-date-picker身上绑定这个属性 :disabled-date="pickerOptionsRang"el-date-picker中有一个属性 disabled-date。
vue3 element表格datepicker怎么禁用日期
bingyue0126的博客
04-21 2146
当在表格里面使用起始日期时，我们需要根据截止日期来对开始日期做选择范围限制，根据开始日期对截止日期做选择范围限制，这就需要获取当前开始、截止日期对象才能判断，但是官方提供的disabled-date只是一个属性，没办法传参，故导致无法实现对应时间范围限制。在date-picker上面使用element提供的事件focus进行传参，从而当鼠标聚焦日期组件就能获取到当前起始和结束日期，然后再在disabled-date事件里面去用获取到的时间对日期组件进行选取范围限制。根据以上思路，废话不多说，直接上代码。
vue3项目中 element-plus中el-date-picker禁止选择当前日期之前的日期
lindaboniu的博客
09-14 2785
【代码】vue3项目中 element-plus中el-date-picker禁止选择当前日期之前的日期。
＜el-date-picker＞实现指定日期禁用
study_7forever的博客
12-07 8141
element组件的<el-date-picker>组件大家经常使用，实现指定某些日期范围禁用，调用官方文档上disabledDate方法。 下面大家看下我实现的小demo,有需要的小伙伴可以拿来用。 需求： 默认是当前日期及其前30天可以选择，其他时间段是禁用状态。 核心代码如下： disabledDate(time){ return time.getTime() < Date.now() - 8.64e7*30 || time.getTime() >D.
vue 设置el-date-picker 当前日期之前不可选择
且听风吟的博客
08-07 3372
<el-date-picker v-model="startTime" type="datetime" value-format="yyyy-MM-dd HH" :picker-options="expireTimeOption" placeholder="选择日期时间"> </el-date-picker> 如下图所示，今天以前的都不能选择：
el-date-picker默认展示最近七天以及设置可选日期选择最大跨度
znavdn的博客
07-15 3856
el-date-picker默认展示最近七天以及设置可选日期选择最大跨度
el-date-picker 最大日期为当前日 vue3中的disabled-date用法
Khun_HWJ的博客
05-06 819
【代码】el-date-picker 最大日期为当前日。
vue3中的disabled-date用法
weixin_44091629的博客
03-20 2337
【代码】vue3中的disabled-date用法。
小白成长日记之前端：element-ui日期时间组件el-date-picker设置禁用日期
weixin_44358713的博客
03-07 3517
注意：element ui和element plus的时间禁用属性不同，element ui用picker-options，element plus用disabled-date。
1.el-date-picker禁用时间
qq_45824759的博客
02-10 729
具体的禁用段时间及今天之前的时间
vue3 el-date-picker禁用指定日期之前或之后的日期
07-28
要在Vue3的el-date-picker中禁用指定日期之前或之后的日期，你可以使用pickerOptions属性来实现。引用\[2\]中的代码可以禁用今天之前的日期，代码如下： ```html <el-date-picker v-model="date" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'选择日期'" :picker-options="pickerOptions"></el-date-picker> ``` ```javascript data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } } } } ``` 而引用\[3\]中的代码可以禁用今天之后的日期（包括今天），代码如下： ```html <el-date-picker v-model="date" type="date" size="small" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="'选择日期'" :picker-options="pickerOptions"></el-date-picker> ``` ```javascript data() { return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); } } } } ``` 你可以根据需要选择其中一种方式来禁用指定日期之前或之后的日期。 #### 引用[.reference_title] - *1* *2* *3* [el-date-picker禁用指定日期之前或之后的日期](https://blog.csdn.net/m0_70547044/article/details/131452031)[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^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值