关于作者
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。
No. | 推荐链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+图文 300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 一、项目需求:
- 二、daterange 类型介绍
- 三、属性和方法
- 四、示例效果图
- 示例源代码
一、项目需求:
做项目时候碰到这样的一个需求: 使用一个时间控件,选取适建范围,要求起始时间和结束时间在30天的范围之内,另一个要求是选择的时间在目前为止往后的两个月时间内。 下面的示例完美的解决了这个问题,特别是disabledDate
这块很有价值。
二、daterange 类型介绍
当 el-date-picker 的 type 属性设置为 “daterange
” 时,它允许用户选择一个日期区间,通常用于筛选某个时间段的数据,如报告、订单、活动时间等场景。
三、属性和方法
v-model
: 用于双向绑定选择的日期范围,值为一个数组,包含两个 Date 对象,分别代表开始和结束日期。type="daterange"
: 指定为日期范围选择模式。range-separator
: 自定义日期范围分隔符,默认为"至"。start-placeholder
和end-placeholder
: 分别设置开始和结束日期输入框的占位文本。picker-options
: 用于配置额外选项,例如限制可选日期范围、禁用特定日期等。- 限制日期选择范围:可以通过 picker-options 属性中的
disabledDate
函数来限制可选日期范围,例如禁止选择过去的日期。
四、示例效果图
示例源代码
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-05-08
*/
<template>
<div class="djs-box">
<div class="topBox">
<h3>vue中 daterange只能选一个月的时间段,禁用设置方法</h3>
<div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div>
</div>
<div class="dajianshi">
<el-date-picker size="mini" v-model="time" type="daterange" range-separator="-"
start-placeholder="起始时间" end-placeholder="结束时间"
style="width: 500px;" value-format="yyyy-MM-dd" format='MM/dd/yyyy'
:picker-options="pickerOptionsRange">
</el-date-picker>
</div>
</div>
</template>
<script>
import dayjs from "dayjs";
export default {
data() {
return {
time:[],
pickerMinDate: '',
pickerOptionsRange: {
onPick: ({ maxDate, minDate }) => {
this.pickerMinDate = minDate.getTime();
if (maxDate) {
this.pickerMinDate = '';
}
},
disabledDate: time => {
if (this.pickerMinDate) {
const day30 = 30 * 24 * 3600 * 1000;
let maxTime = this.pickerMinDate + day30;
let minTime = this.pickerMinDate ;
return time.getTime() > maxTime || time.getTime() < minTime;
}else{
return time.getTime() < Date.now() || time.getTime() > dayjs(new Date()).add(60, "day")
}
}
},
}
},
mounted() {
},
}
</script>
<style scoped>
.djs-box {
width: 1000px;
height: 650px;
margin: 50px auto;
border: 1px solid black;
}
.topBox {
margin: 0 auto 0px;
padding: 10px 0 20px;
background: black;
color: #fff;
}
.dajianshi {
width: 98%;
margin: 0 auto;
height: 520px;
padding-top:150px;
background-color: cde;
position: relative;
}
</style>