下面引入的 common.js

const GetNowTime = (time, type) => {
	var date = time,
		year = date.getFullYear(),
		month = date.getMonth() + 1,
		day = date.getDate(),
		hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
		minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
		second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
	month >= 1 && month <= 9 ? (month = "0" + month) : "";
	day >= 0 && day <= 9 ? (day = "0" + day) : "";
	if (type == 1) {
		var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
	} else {
		var timer = year + '-' + month + '-' + day;
	}
	
	return timer;
}

module.exports = {
	GetNowTime
}

<template>
	<view>
		<view class="rqxz">
			<view><button type="primary" size="mini" @click="lastMonth">上一月</button></view>
			<view v-if="month >= 10">{{ year }}-{{ month }}</view>
			<view v-else>{{ year }}-0{{ month }}</view>
			<view><button type="primary" size="mini" @click="nextMonth">下一月</button></view>
		</view>
		<view class="weekBox">
			<block v-for="item in weekList" :key="item">
				<view>{{ item.slice(1) }}</view>
			</block>
		</view>

		<view class="BigBox">
			<block v-for="(item, index) in everyDay" :key="item.day">
				<view class="MWBox">
					<view @click="selectDay(item, index)" :class="day == item.day ? 'daySelect' : ''">{{ item.day }}</view>
					<!-- <view>{{ item.week }}</view> -->
				</view>
			</block>
		</view>
		<button type="default" @click="submit">提交</button>
	</view>
</template>

<script>
import common from '../../common/common.js';//封装的格式化日期方法
export default {
	data() {
		return {
			weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			year: 2020,
			month: 0,
			day: 0,
			week: '',
			everyDay: []
		};
	},
	onLoad() {
		this.year = Number(common.GetNowTime(new Date(), 2).slice(0, 4));
		this.month = Number(common.GetNowTime(new Date(), 2).slice(5, 7));
		this.day = Number(common.GetNowTime(new Date(), 2).slice(8, 10));
		this.getEveryDay(this.year + '-' + this.month);
	},
	methods: {
		//上一月
		lastMonth() {
			this.month -= 1;
			if (this.month == 0) {
				this.year -= 1;
				this.month = 12;
			}
			this.getEveryDay(this.year + '-' + this.month);
			this.zeroData();
		},
		//下一月
		nextMonth() {
			this.month += 1;
			if (this.month > 12) {
				this.year += 1;
				this.month = 1;
			}
			this.getEveryDay(this.year + '-' + this.month);
			this.zeroData();
		},
		//选择日期
		selectDay(item, index) {
			if (item.day != '') {
				this.day = item.day;
				this.week = item.week;
			}
		},
		//提交按钮事件
		submit() {
			console.log(common.GetNowTime(new Date(this.year + '-' + this.month + '-' + this.day), 2));
		},
		//遍历月份日期
		getEveryDay(data) {
			let date = new Date(data);
			let month = date.getMonth();
			//设置月份
			date.setMonth(month + 1);
			//设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天（比如，二月份就是28或29，其他月份就是30或31），方便下边的循环
			date.setDate(0);
			let dayArry = [];
			let day = date.getDate(); //获取当前月最后一天是几号

			for (let i = 1; i <= day; i++) {
				date.setDate(i); //如果只获取当前选择月份的每一天，则不需要date.setDate(i)只需dayArry.push(i)即可，其中date.setDate(i)是设置当前月份的每一天
				dayArry.push({ day: i, week: this.getWeekday(date.getDay()) }); //选中月份的每一天和当天是星期几
			}

			this.everyDay = dayArry;
			this.resetDay();
		},
		getWeekday(day) {
			return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][day];
		},
		//重置日期与顶部周期相对应
		resetDay() {
			let arr = this.weekList;
			let w = this.everyDay[0].week;
			arr.forEach((v, index) => {
				if (v == w) {
					let id = index;
					if (id != 0) {
						for (let i = 0; i < id; i++) {
							this.everyDay.unshift({ day: '', week: '' });
						}
					}
				}
			});
		},
		//判断选择的日期是否在当前月份中存在，不存在默认当前月的第一天
		zeroData() {
			let that = this;
			that.selectIndex = -1;
			let arr = that.everyDay;
			let day1 = that.day;
			var ret = arr.findIndex(v => {
				return v.day == day1;
			});
			if (ret == -1) {
				that.day = 1;
			}
		}
	}
};
</script>

<style lang="less" scoped>
.rqxz {
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 20upx 0;
}
.weekBox {
	width: 100%;
	display: flex;
	align-items: center;
	view {
		text-align: center;
		width: 14%;
	}
}
.BigBox {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background-color: #83cbac;
	padding-bottom: 40upx;
	.MWBox {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		color: #ffffff;
		width: 14%;
		margin-top: 40upx;
		view {
			height: 50upx;
		}
	}
}
.daySelect {
	// width: 50upx;
	height: 50upx;
	background-color: #2b7c38;
	border-radius: 25upx;
	line-height: 50upx;
}
</style>

效果图：

本文由自己开发，不足之处,欢迎大佬们指出（不要在意样式）