element UI+vue关于日期范围选择的操作,picker-options属性的使用
2024-10-20 01:32:26
一般
<el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。
代码如下:
1,起始日期:
<el-form-item
label="有效起始日期"
prop="title"
>
<el-date-picker
v-model="info.startDate"
type="date"
placeholder="选择日期"
:picker-options="pickerIssueOptions"
size="mini"
style="width:100%;height:30px"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
2,截止日期:
<el-form-item
label="有效截止日期"
prop="title"
>
<el-date-picker
v-model="info.endDate"
type="date"
placeholder="选择日期"
:picker-options="pickerExpireOptions"
size="mini"
style="width:100%;height:30px"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
/>
然后主要是针对picker-options的操作:
在data中写上
pickerIssueOptions: {
disabledDate: (time) => {
if (!this.info.endDate) { return false }
return time.getTime() > new Date(this.info.endDate.replace(/-/g, '/')).getTime()
}
},
pickerExpireOptions: {
disabledDate: (time) => {
if (!this.info.startDate) { return false }
return time.getTime() < new Date(this.info.startDate.replace(/-/g, '/')).getTime()
}
},
即可,注意if里面的判断。
最新文章
- Oracle 11.2.4.0 ACTIVE DATAGUARD 单实例安装(COPY创建备库)
- double保持精度,防止小数点后数字的丢失的小方法
- 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定
- Quickling技术
- mongodb 3.2 用户权限管理配置
- 每天一个linux命令---telnet
- JSONP跨域请求数据报错 “Unexpected token :”的解决办法
- .net 时间戳互相转换(精确到毫秒)
- HDU 1041 Computer Transformation (简单大数)
- centOS学习part4:安装配置vsftp
- MySQL5.6 基于db的并行复制
- ♫【CSS】命名颜色
- dns是什么
- ASP.NET MVC用存储过程批量添加修改数据
- Js中常用知识点(typeof、instanceof、动态属性、变量作用域)
- Git 教程(二):提交和回退
- echarts设置option中的数据对象优化
- Go开发之路 -- Go语言基本语法
- 解决Kettle ETL数据乱码
- JS实现页面字体繁简转换