vue 时间切换点击得到某年的一月或者一周

一、效果图，这是当前年的，具体根据需求来改

 二、html以及css代码

<div class="box">
	<div><button type="button" @click="getReduce">-</button></div>
	<div class="time"><span>{{upYear}}.{{upMonth}}</span></div>
	<div><button type="button" @click="getplus">+</button></div>
</div>
<div class="box">
	<div><button type="button" @click="getReduce1">-</button></div>
	<div class="time"><span>{{weekStart}}&nbsp;-&nbsp;{{weekEnd}}</span></div>
	<div><button type="button" @click="getplus1">+</button></div>
</div>

.box{
	border: 1px solid #000000;
	width: 40%;
	height: 200px;
	margin: 100px auto;
	display: flex;
	align-items: center;
	justify-content: center;
}
.time{
	margin: 0 20px;
}

三、js代码

data() {
	return {
		upYear:'',//当前年(可变)
		upMonth:'',//当前月(可变)
		year:'',//当前年(不可变)
		month:'',//当前月(不可变)
		nowYear: '', //当前年(可变)
		weekStart: '', //当前日期一周开始(可变)
		weekEnd: '', //当前日期一周结束(可变)
		newDay: '', //当前日期一周结束(不可变)
		newYear: '', //当前年(不可变)
	}
},
mounted() {
	this.formatNewDate()
},
methods: {
	getReduce() { //月减
		this.upMonth--;
		if (this.upMonth < 1) {
			this.upYear--;
			this.upMonth = 12;
		}
	},
	getplus() { //月加
		this.upMonth++;
		if (this.upMonth > 12) {
			this.upYear++;
			this.upMonth = 1;
		}
		if (this.upYear == this.year && this.upMonth > this.month) {
			alert("不能查看未来")
			this.upYear = this.year;
			this.upMonth = this.month;
			return
		}
	},
	getReduce1() { //周减
		let nowYear = this.nowYear,
			weekStart = this.weekStart,
			weekEnd = this.weekEnd;
		let val = nowYear + '/' + weekStart.replace(/\./, '/');
		val = this.formatDate(new Date(((new Date(val)).getTime()) - (86400000 * 7)), 'yyyy-MM-dd');
		let getNew = this.getWeekStartAndEnd(val)
		this.weekStart = getNew.weekStart;
		this.weekEnd = getNew.weekEnd;
		this.nowYear = getNew.nowYear;
		this.getQuery1()
	},
	getplus1() { //周加
		let nowYear = this.nowYear,
			weekStart = this.weekStart,
			weekEnd = this.weekEnd,
			newDay = this.newDay,
			newYear = this.newYear;
		let val = nowYear + '/' + this.weekStart.replace(/\./, '/');
		val = this.formatDate(new Date(((new Date(val)).getTime()) + (86400000 * 7)), 'yyyy-MM-dd');
		let theDate = nowYear + weekEnd;
		let theDate1 = newYear + newDay;
		if (theDate == theDate1) {
			alert("不能查看未来")
			return
		}
		let getNew = this.getWeekStartAndEnd(val)
		this.weekStart = getNew.weekStart;
		this.weekEnd = getNew.weekEnd;
		this.nowYear = getNew.nowYear;
		this.getQuery1(val)
	},
	getQuery1() {
		let stime, etime, that = this;
		stime = that.nowYear + '/' + that.weekStart.replace(/\./, '/');
		etime = that.nowYear + '/' + that.weekEnd.replace(/\./, '/');
	},
	formatNewDate() {
		let date = new Date();
		let year = date.getFullYear(); // 年
		let month = date.getMonth() + 1; // 月
		let months = date.getMonth(); // 月
		let day = date.getDate(); // 日
		day = day < 10 ? "0" + day : day; // 如果只有一位，则前面补零
		this.year = year;
		this.upYear = year;
		this.month = month;
		this.upMonth = month;
		this.day = day;
		let nowData = year + '-' + month + '-' + day
		let getNew = this.getWeekStartAndEnd(nowData)
		this.weekStart = getNew.weekStart;
		this.weekEnd = getNew.weekEnd;
		this.nowYear = getNew.nowYear;
		this.newDay = getNew.weekEnd;
		this.newYear = getNew.nowYear;
	},
	// 获取指定日期的那一周的开始、结束日期
	getWeekStartAndEnd(val) {
		let now = '';
		if (val) {
			val = val.replace(/-/g, '/')
			now = new Date(val); // 日期
		} else {
			now = new Date(); // 日期
		}
		let nowDayOfWeek = now.getDay(); // 本周的第几天
		let nowDay = now.getDate(); // 当前日
		let nowMonth = now.getMonth(); // 当前月
		let nowYear = now.getYear(); // 当前年
		let weekStart = this.getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
		let weekEnd = this.getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
		let newList = {
			weekStart: weekStart,
			weekEnd: weekEnd,
			nowYear: nowYear + 1900
		}
		return newList
	},
	// 获得某一周的开始日期
	getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
		let weekStartDate = new Date(nowYear, nowMonth, nowDay - (nowDayOfWeek - 1))
		return this.formatNewDates(weekStartDate)
	},
	// 获得某一周的结束日期
	getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
		let weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek))
		return this.formatNewDates(weekEndDate)
	},
	// 日期格式化
	formatNewDates(date) {
		var myyear = date.getFullYear();
		var mymonth = date.getMonth() + 1;
		var myweekday = date.getDate();
		if (mymonth < 10) {
			mymonth = "0" + mymonth;
		}
		if (myweekday < 10) {
			myweekday = "0" + myweekday;
		}
		return mymonth + "." + myweekday
	},
	formatDate(date, fmt) {
		if (/(y+)/.test(fmt)) {
			fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
		}
		let o = {
			'M+': date.getMonth() + 1,
			'd+': date.getDate(),
			'h+': date.getHours(),
			'm+': date.getMinutes(),
			's+': date.getSeconds()
		};
		for (let k in o) {
			if (new RegExp(`(${k})`).test(fmt)) {
				let str = o[k] + '';
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
			}
		}
		return fmt;
	},
	padLeftZero(str) {
		return ('00' + str).substr(str.length);
	},
},

四、以上就是全部内容，欢迎给出不同见解，有更好的插件也可以推荐一下，有不足的也希望可以指出