warst/warst-h5/pages/attendanceClock/workContent/com/selectMonth.vue

<template>
	<view class="uni-calendar__header">
		<view class="uni-calendar__header-btn-box" @click.stop="pre">
			<view
				class="uni-calendar__header-btn uni-calendar--left"
			></view>
		</view>
		<picker
			mode="date"
			:value="selectDate"
			fields="month"
			@change="bindDateChange"
		>
			<text class="uni-calendar__header-text">
				{{ (nowDate.year || '') + ' / ' + (nowDate.month || '') }}
			</text>
		</picker>
		<view class="uni-calendar__header-btn-box" @click.stop="next">
			<view
				class="uni-calendar__header-btn uni-calendar--right"
			></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'selectMonth',
	data() {
		return {
			selectDate: '', // yyyy-mm
			date: '',
			nowDate: {
				year: '',
				month: '',
			},
		};
	},
	created() {
		const _date = new Date();
		const ym = uni.$u.timeFormat(_date, 'yyyy-mm');
		this.selectDate = ym; // 当前选中的月份
		const [year, month] = ym.split('-');
		this.nowDate.year = year;
		this.nowDate.month = month;
		this.$emit('dateChange', this.selectDate);
	},
	methods: {
		bindDateChange(e) {
			this.selectDate = e.detail.value;
			const [year, month] = this.selectDate.split('-');
			this.nowDate.year = year;
			this.nowDate.month = month;
			this.$emit('dateChange', this.selectDate);
		},
		/**
		 * 获取任意时间
		 */
		getDate(date, AddDayCount = 0, str = 'day') {
			if (!date) {
				date = new Date();
			}
			if (typeof date !== 'object') {
				date = date.replace(/-/g, '/');
			}
			const dd = new Date(date);
			switch (str) {
				case 'day':
					dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
					break;
				case 'month':
					if (dd.getDate() === 31 && AddDayCount > 0) {
						dd.setDate(dd.getDate() + AddDayCount);
					} else {
						const preMonth = dd.getMonth();
						dd.setMonth(preMonth + AddDayCount); // 获取AddDayCount天后的日期
						const nextMonth = dd.getMonth();
						// 处理 pre 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
						if (
							AddDayCount < 0 &&
							preMonth !== 0 &&
							nextMonth - preMonth > AddDayCount
						) {
							dd.setMonth(
								nextMonth + (nextMonth - preMonth + AddDayCount)
							);
						}
						// 处理 next 切换月份目标月份为2月没有当前日(30 31) 切换错误问题
						if (
							AddDayCount > 0 &&
							nextMonth - preMonth > AddDayCount
						) {
							dd.setMonth(
								nextMonth - (nextMonth - preMonth - AddDayCount)
							);
						}
					}
					break;
				case 'year':
					dd.setFullYear(dd.getFullYear() + AddDayCount); // 获取AddDayCount天后的日期
					break;
			}
			const y = dd.getFullYear();
			const m =
				dd.getMonth() + 1 < 10
					? '0' + (dd.getMonth() + 1)
					: dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
			return {
				fullDate: y + '-' + m + '-' + d,
				year: y,
				month: m,
				date: d,
				day: dd.getDay(),
			};
		},
		setDate(res) {
			this.selectDate = `${res.year}-${res.month}`;
			this.nowDate.year = res.year;
			this.nowDate.month = res.month;
			this.$emit('dateChange', this.selectDate);
		},
		/**
		 * 上个月
		 */
		pre() {
			const res = this.getDate(this.selectDate, -1, 'month');
			this.setDate(res);
		},
		/**
		 * 下个月
		 */
		next() {
			const res = this.getDate(this.selectDate, 1, 'month');
			this.setDate(res);
		},
	},
};
</script>

<style scoped lang="scss">
.uni-calendar__header {
	position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 50px;
}

.uni-calendar__header-btn-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
}

.uni-calendar__header-btn {
	width: 10px;
	height: 10px;
	border-left-color: $uni-text-color-placeholder;
	border-left-style: solid;
	border-left-width: 2px;
	border-top-color: $uni-color-subtitle;
	border-top-style: solid;
	border-top-width: 2px;
}

.uni-calendar--left {
	transform: rotate(-45deg);
}

.uni-calendar--right {
	transform: rotate(135deg);
}
</style>