1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ElementUI日期选择器实现禁用多时间段

ElementUI日期选择器实现禁用多时间段

时间:2022-09-11 01:29:54

相关推荐

ElementUI日期选择器实现禁用多时间段

禁用时间段为后端返回数据

产品需求为:

后台数据中返回时间段,在选择开始日期时为不可选状态。

当开始日期选定后,

1、截止日期输入框中早于当前日期前的日期禁用

2、截止日期输入框中如果有已经禁用的日期,禁用日期中从最早的一天开始之后的日期全部禁用,只能选择开始日期当天~禁用日期中最早的一天的前一天

3、截止日期输入框中如果没有已经禁用的日期,则开始日期当天和后续的日期都可以选择

如上图,我选择的是17号那一天,那么在这里只有17-22号之前可选,后面需全部禁用掉

下面上代码:

组件:

<el-form-item label="合同生效日期" prop="value1"><el-date-pickerv-model="dataForm.value1"type="date":picker-options="pickerOptions" //在data中绑定@focus="getDat" //用来接收后端传递过来的数据@change="subMit" //用来对比截止日期的数据placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="有效截止日期" prop="value2"><el-date-pickerv-model="dataForm.value2"type="date":picker-options="pickerOptions1" //在data中绑定@focus="getDat"placeholder="选择日期"></el-date-picker></el-form-item>

data定义:

data()

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。