element-ui+ dayjs+momentjs 获取关于按日，按周，按月，按年及上下周，年等切换

qq_41781984

已于 2022-08-12 16:32:03 修改

阅读量676

点赞数

文章标签： vue.js 前端 javascript

于 2022-08-12 11:11:56 首次发布

本文链接：https://blog.csdn.net/qq_41781984/article/details/126300053

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="element/index.css" />
		<script src="vue/vue.js"></script>
		<script src="element/index.js"></script>
		<script src="js/moment-with-locales.min.js"></script>
		<script src="js/dayjs.min.js"></script>
	</head>
	<style>
		.el-popper {
			position: absolute;
			z-index: 2001;
		}
	</style>
	<body>
		<div id="app">
			<el-button :type="item.dateType == currentMethod ? 'primary' :'' " v-for="(item,index) in timeList"
				@click="changeTimeMethod(item.dateType)">
				{{ item.name }}
			</el-button>


			<el-button :type="item.dateType == currentMethod && item.type == currentIndex  ? 'primary' :'' "  
			v-for="(item,index) in prevCurrNextList" @click="handleChange(item.type,item.dateType)">
				{{ item.name }}
			</el-button>


			<el-date-picker v-if="elDateType != 'week' " v-model="time" :type="elDateType"  :value-format="valueFormat[elDateType]"
				placeholder="选择日期" :picker-options="pickerOptionsDay">
			</el-date-picker>

			<el-date-picker v-model="time" type="date" v-if="elDateType == 'week'"
				:format="startDataWeek + '-' + endDateWeek" placeholder="选择周" size="small"
				:picker-options="pickerOptionsDay" @change="handleChangeWeek">
			</el-date-picker>

		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				startDataWeek: null,
				endDateWeek: null,
				time: moment().format('YYYY-MM-DD'),
				elDateType: "date", //日月年日期选择器 //date日 month月 year年 element-ui 日期选择器type类型
				valueFormat:{
					date: "yyyy-MM-dd",
					month:"yyyy-MM",
					year:"yyyy"
				},
				formatMap: {
					date: 'YYYY-MM-DD',
					month: 'YYYY-MM',
					yaer: 'YYYY'
				},
				timeList: [{
					name: "按日",
					dateType: "date"
				}, {
					name: "按月",
					dateType: "month"
				}, {
					name: "按周",
					dateType: "week"
				}, {
					name: "按年",
					dateType: "year"
				}],
				currentMethod: "date",
				currentIndex:"current",
				allPrevNextList: [{
					name: "前一天",
					type: "prev",
					dateType: "date"
				}, {
					name: "今日",
					type: "current",
					dateType: "date"
				}, {
					name: "后一天",
					type: "next",
					dateType: "date"
				}, {
					name: "前一周",
					type: "prev",
					dateType: "week"
				}, {
					name: "本周",
					type: "current",
					dateType: "week"
				}, {
					name: "后一周",
					type: "next",
					dateType: "week"
				}, {
					name: "前一月",
					type: "prev",
					dateType: "month"
				}, {
					name: "本月",
					type: "current",
					dateType: "month"
				}, {
					name: "后一月",
					type: "next",
					dateType: "month"
				}, {
					name: "前一年",
					type: "prev",
					dateType: "year"
				}, {
					name: "今年",
					type: "current",
					dateType: "year"
				}, {
					name: "后一年",
					type: "next",
					dateType: "year"
				}],
				pickerOptionsDay: {
					disabledDate(time) {
						return time.getTime() > new Date();
					}
				},
				weekOfDay: moment().format("E"), //周
			},
			mounted() {
				//本周
				this.startDataWeek = moment().subtract(this.weekOfDay - 1, "days").format("YYYY-MM-DD");
				this.endDateWeek = moment().add(7 - this.weekOfDay, "days").format("YYYY-MM-DD");
			},
			computed: {
				prevCurrNextList() {
					return this.allPrevNextList.filter(item => item.dateType == this.currentMethod)
				}
			},
			methods: {
				changeTimeMethod(dateType) {
					this.currentMethod = dateType;
					this.elDateType = dateType;
					this.time = moment().format(this.formatMap[dateType]);
				},
				handleChangeWeek(v) {
					this.startDataWeek = dayjs(this.time).startOf('week').add(1, 'day').format("YYYY-MM-DD");
					this.endDateWeek = dayjs(this.time).endOf('week').add(1, 'day').format("YYYY-MM-DD");
				},


				//上今下切换
				handleChange(type, dateType) {
					let dateMapForMoment = {
						date: "days",
						month: "month",
						year: "year"
					}
					this.elDateType = dateType;
					this.currentIndex = type;
					let currentTime = moment().format(this.formatMap[type]);
					let prevTime = moment(this.time).subtract(1, dateMapForMoment[dateType]).format(this.formatMap[
						dateType]);
					let nextTime = moment(this.time).add(1, dateMapForMoment[dateType]).format(this.formatMap[dateType]);
					let timeMap = {
						prev: prevTime,
						next: nextTime,
						current: currentTime
					}
					if (dateType == "week") {
						this.prevCurrNextWeek(type);
					} else {
						this.time = timeMap[type];
					}
				},
				
				//上一周本周下一周的切换
				prevCurrNextWeek(type) {
					if (type == "current") {
						this.startDataWeek = moment().subtract(this.weekOfDay - 1, "days").format("YYYY-MM-DD");
						this.endDateWeek = moment().add(7 - this.weekOfDay, "days").format("YYYY-MM-DD");
					} else if (type == "prev") {
						this.preNextWeek(this.startDataWeek, -7);
					} else if (type == "next") {
						this.preNextWeek(this.startDataWeek, 7);
					}
				},
				//上下周
				preNextWeek(date, num) {
					this.startDataWeek = moment(date).weekday(num).startOf("week").add(1, "days").format(
					"YYYY-MM-DD");
					this.endDateWeek = moment(date).weekday(num).endOf("week").add(1, "days").format("YYYY-MM-DD");
				},



			},


		})
	</script>
</html>