vue中 daterange只能选一个月的时间段，禁选设置示例

关于作者

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信，一起交流。

文章目录

• • • 一、项目需求：
    • 二、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>
 
 复制