js日期周区间选择器

js日期周区间选择器

效果图：

<template>
	<view class="weekly">
		<view class="block" v-for="(item,index) in date" :key="index">
			<view class="mon">
				<view class="txte" style="float: left;font-size: 50rpx;" @click="sub">-</view>
				<text class="txte">
					{{item.month}}
				</text>
				<view class="txte" style="float: right;font-size: 50rpx;" @click="add">
					+
				</view>
				
			</view>
			<view class="box_1 flex-row">
				<view class="text-group_5 flex-col" v-for="(item2,index2) in item.WeekData "
					:class="tabID == item2.endTime?'active':''" :key="item2.endTime" @click="testTabClick(item2)">
 
					<text class="text_14">第{{index2+1}}周</text>
					<text class="text_15 ">{{item2.beginTime}}至{{item2.endTime}}</text>
				</view>
			</view>

		</view>
		
	</view>
</template>
 
 
<script>
	export default {
 
		data() {
			return {
				tabID: '',
				date: {
					month: '2022年5月',
					WeekData: [{
						beginTime: '',
						weeknum: '',
						endTime: '',
						startDate:"",
						endDate:""
					}, ]
				},
				year:'',
				month:''
			}
		},
		onLoad() {
			const date = new Date()
			this.year = date.getFullYear();
			//获取月
			this.month = date.getMonth() + 1;
			 
			this.initData(this.year+'-'+this.month+'-01')
		},

 
		methods: {
			add(){
				this.month++
				if(this.month>12){
					this.month=1
					this.year++
				}
				this.initData(this.year+'-'+this.month+'-01') 
			},
			sub(){
				this.month--
				if(this.month<1){
					this.month=12
					this.year--
				}
				this.initData(this.year+'-'+this.month+'-01') 
			},
			initData(e) {
				let arr = []
				let getLastSixMon = this.getLastSixMon(new Date(e))
					let res = getLastSixMon;
					let id = res.slice(5, 10)
					let WeekData = this.weeks(res)
					let month = res.replace('-', '年') + '月'
					let result = {
						month,
						WeekData,
					}
					console.log(result);
					arr.push(result)
 
				arr.forEach((item, index) => {
					let last = arr[index + 1],
						first = arr[index],
						lastData,
						firstData = first.WeekData[0].endTime
					if (last) {
						let lastlen = last.WeekData.length - 1
						lastData = last.WeekData[lastlen].endTime
					}
					if (lastData == firstData) {
						last.WeekData.pop()
 
					}
 
				})
				this.date = arr
				console.log(arr);
			},
			getLastSixMon(e) {
				// var data = new Date('2022-07-01');
				var data = e
				//获取年
				var year = data.getFullYear();
				//获取月
				var mon = data.getMonth() + 1;
				var arry = ''	
					if (mon <= 0) {
						year = year - 1;
						mon = mon + 12;
					}
					arry = year + "-" + mon;
					mon = mon - 1;
				
				console.log(arry);
				return arry
			},
			time(date) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				return y + '-' + m + '-' + d
			},
			weeks(now_month) {
				let {
					time
				} = this
				let week_array = [];
				let today = new Date(Date.parse(now_month));
				let year = today.getFullYear();
				let month = today.getMonth();
				let i = 0;
				let start = new Date(year, month, 1); // 得到当月第一天
				let end = new Date(year, month + 1, 0); // 得到当月最后一天
 
				// 循环每周最后天叠设置为第一天，直到最后一天小于当月的最后一天
				while (start <= end) {
					const monday = new Date(start.getTime());
					const sunday = new Date(start.getTime());
					let startDate, endDate
 
					monday.setDate(monday.getDate() + 1 - monday.getDay());
					sunday.setDate(sunday.getDate() + 7 - sunday.getDay());
					startDate = time(monday),
						endDate = time(sunday)
					week_array.push({
						startDate,
						endDate,
						beginTime: startDate.slice(5, 10).replace('-', '.'),
						endTime: endDate.slice(5, 10).replace('-', '.'),
					})
 
					start = sunday;
				}
				return week_array;
			},
 
			testTabClick(item) {
				this.tabID = item.endTime
				console.log(item);
			}
 
		}
	}
</script>
 
 
<style lang="scss" scoped>
	.text-wrapper_1 {
		background-color: rgba(245, 252, 248, 1);
		padding: 16rpx 334rpx 16rpx 32rpx;
		margin-bottom: 32rpx;
 
		.text_3 {
			overflow-wrap: break-word;
			color: rgba(0, 182, 82, 1);
			font-size: 26rpx;
			letter-spacing: 0.10833333432674408px;
			text-align: left;
			white-space: nowrap;
			line-height: 36rpx;
		}
	}
 
	.active {
		color: #ffffff !important;
		background: -webkit-linear-gradient(top, #0ba360 0%, #0ba360 100%)
	}
 
	.weekly {
		background-color: #fff;
	}
 
	.mon {
		width: 250rpx;
		height: 55rpx;
		margin: 0 auto;
 
 
	}
 
	.flex-row {
		display: flex;
	}
 
	.flex-col {
		display: flex;
		flex-direction: column
	}
 
	.txte {
		font-size: 30rpx;
		font-weight: 800;
	}
 
 
 
 
	.box_1 {
		display: flex;
		flex-wrap: wrap;
		justify-items: center;
		border-radius: 6px;
		padding: 18rpx 8rpx 18rpx 8rpx;
		color: #9b9b9b;
 
		.text-group_5 {
			padding: 30rpx;
			background-color: rgba(244, 246, 247, 1);
			margin-left: 25rpx;
			margin-bottom: 25rpx;
 
			.text_14 {
				overflow-wrap: break-word;
				color: rgba(34, 34, 34, 1);
				font-size: 30rpx;
				font-family: PingFangSC-Semibold;
				text-align: center;
				white-space: nowrap;
				line-height: 42rpx;
				margin: 0 28rpx 0 30rpx;
			}
 
			.text_15 {
				overflow-wrap: break-word;
				font-size: 24rpx;
				text-align: center;
				white-space: nowrap;
				line-height: 34rpx;
				margin-top: -2rpx;
			}
		}
	}
</style>

借鉴来源：https://blog.csdn.net/qq_63358859/article/details/126489918