ElementUI日期选择器的时间范围控制
elementui提供的日期选择器,开发中遇到了要设置日期的可选范围为今天及以后的时间;
-
单个日期控制
vue代码:
<el-date-picker v-model="value" type="date" placeholder="请选择到期日期" :picker-options="pickerOptions"> </el-date-picker>
限制不能选择今天之前的日期(可以选择今天的日期)
<script> export default { data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.Now() - 8.64e7; } }, } } } </script>
限制不能选择今天之前的日期(不能选择今天的日期)
<script> export default { data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.Now() } }, } } } </script>
-
两个日期联动控制
运用场景:
1、当天日期为:2021-01-07
2、elementUI的两个日期选择框:起送时间、送达时间
限制情况:
1、起送时间、送达时间都不能选择今天之前的日期(即:2021-01-06之后)
2、若起运时间选择了2021-01-07,送达时间便不能选择2021-01-07之前的日期(即:2021-01-07之后)
3、若送达时间选择了2021-01-08,起送时间便不能选择今天之前的日期,且不能选择2021-01-09之后的日期(即:2021-01-07至2021-01-09)代码:
<el-date-picker v-model="value" type="dateStart" placeholder="选择起运日期" :picker-options="pickerOptionsstart"> </el-date-picker> <el-date-picker v-model="value" type="dateEnd" placeholder="选择送达日期" :picker-options="pickerOptionsEnd"> </el-date-picker> <script> export default { data (){ return { dateStart:'', // 起运日期 dateEnd:'', // 送达日期 pickerOptionsstart: { disabledDate(time) { if (this.dateEnd) { var endTime = new Date(this.dateEnd).valueOf(); } var startTime = Date.Now() - 8.64e7; return time && (time.valueOf() < startTime) || time.valueOf() > endTime } }, pickerOptionsEnd: { disabledDate(time) { if (this.dateStart) { // 让用户可以选择开始结束同一天 var startTime = new Date(this.dateStart).valueOf() - 8.64e7 + 1; } else { var startTime = Date.Now() - 8.64e7; } return time && time.valueOf() < startTime } }, } } } </script>
实现的效果如下:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。