首页 前端知识 vue中 daterange只能选一个月的时间段,禁选设置示例

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

2024-05-14 23:05:24 前端知识 前端哥 320 988 我要收藏

在这里插入图片描述

查看本专栏目录


关于作者

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

在这里插入图片描述

No.推荐链接
1Openlayers 【入门教程】 - 【源代码+图文 300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

      • 一、项目需求:
      • 二、daterange 类型介绍
      • 三、属性和方法
      • 四、示例效果图
      • 示例源代码

一、项目需求:

做项目时候碰到这样的一个需求: 使用一个时间控件,选取适建范围,要求起始时间和结束时间在30天的范围之内,另一个要求是选择的时间在目前为止往后的两个月时间内。 下面的示例完美的解决了这个问题,特别是disabledDate这块很有价值。

二、daterange 类型介绍

当 el-date-picker 的 type 属性设置为 “daterange” 时,它允许用户选择一个日期区间,通常用于筛选某个时间段的数据,如报告、订单、活动时间等场景。

三、属性和方法

  • v-model: 用于双向绑定选择的日期范围,值为一个数组,包含两个 Date 对象,分别代表开始和结束日期。
  • type="daterange": 指定为日期范围选择模式。
  • range-separator: 自定义日期范围分隔符,默认为"至"。
  • start-placeholderend-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>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/8631.html
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!