el-date-picker日期组件默认显示30天范围

最新推荐文章于 2025-04-29 17:46:09 发布

原创最新推荐文章于 2025-04-29 17:46:09 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

本文介绍了一个使用Element UI库中的日期选择器组件实现指定日期范围选取功能的方法。该组件允许用户选择一个开始日期和结束日期，并通过自定义的getNowTime方法预设了过去30天到今天的日期范围作为默认值。

先看效果：
element日期组件默认30天范围
组件代码：

<el-date-picker
    style="margin-right: 10px;"
    v-model="timeValue"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
	value-format="yyyy-MM-dd"
	>

data数据：

	timeValue: [this.getNowTime(new Date() - 86400000 * 30), this.getNowTime(new Date())]

方法：

		// 获取日期
		getNowTime(temp) {
			var now = new Date(temp);
			var year = now.getFullYear(); 	//得到年份
			var month = now.getMonth() + 1; //得到月份
			var date = now.getDate(); 		//得到日期
			month = month.toString().padStart(2, "0");
			date = date.toString().padStart(2, "0");
			return `${year}-${month}-${date}`;
		}