js 获取某年某月每几周的范围

需求：获取某年某月每几周的范围

 

思路：① 计算每月共有几周；

            ②获取某月第几周的范围；

            ③遍历加入数组。

效果图：

 第一步：getWeeks()计算某月共有几周

//计算某月共有几周
	getWeeks(year, month) {
		var d = new Date();
		// 该月第一天
		d.setFullYear(year, month - 1, 1);
		var w1 = d.getDay();
		if (w1 == 0) w1 = 7;
		// 该月天数
		d.setFullYear(year, month, 0);
		var dd = d.getDate();
		// 第一个周一
		let d1;
		if (w1 != 1) d1 = 7 - w1 + 2;
		else d1 = 1;
		let week_count = Math.ceil((dd - d1 + 1) / 7);
		return week_count;
	},

 第二步：getWeekTime()获取某月第几周的范围

getWeekTime(year, month, weekday) {
		var d = new Date();
		// 该月第一天
		d.setFullYear(year, month - 1, 1);
		var w1 = d.getDay();
		if (w1 == 0) w1 = 7;
		// 该月天数
		d.setFullYear(year, month, 0);
		var dd = d.getDate();
		// 第一个周一
		let d1;
		if (w1 != 1) d1 = 7 - w1 + 2;
		else d1 = 1;
		var monday = d1 + (weekday - 1) * 7;
		var sunday = monday + 6;
		if (month <10) {
			month = "0" + month
		}
		if (monday <10) {
			monday = "0" + monday
		}
		var from = year + "/" + month + "/" + monday;
		var to;
		if (sunday <= dd) {
			if (sunday<10) {
				sunday = "0" + sunday
			}
			to = year + "/" + month + "/" + sunday;
		} else {
			d.setFullYear(year, month - 1, sunday);
			let days = d.getDate();
			let m = d.getMonth() + 1
			if (m <10) {
				m = "0" + m
			}
			if (days<10) {
				days = "0" + days
			}
			to = d.getFullYear() + "/" + m + "/" + days;
		}
		
		return  from + " ~ " + to;
	},

第三步： 引用方法，getWeek（）遍历加入数组，封装组件

<template>
	<view class="CalendarMonth">
		<view class="year flex-r fai-c fj-c">
			<image class="logo-30 rd180" mode="widthFix" src="/static/jiantou/right.png" @click="reduceYear()">
			</image>
			<span>{{year}}年{{month}}月</span>
			<image class="logo-30" mode="widthFix" src="/static/jiantou/right.png" @click="addYear()"></image>
		</view>
		<scroll-view scroll-y style="max-height: 50vh;">	
			<view class="monthList w-100">
				<view class="month" :class="chooseWeek==index?'col-home':''"  v-for="(item, index) in weeksData" :key="index" @click="toSeleWeek(item,index)">
					<view>第{{index+1}}周</view> 
					<view class="mgt-10">{{item}}</view> 
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import getWeekNumber from "@/common/doApi.js" //这里写的是自己获取方法的存放路径
	export default {
		props: {},
		data() {
			return {
				chooseWeek:0,
				weeksData:[],
				//获取完整的年份(4位)
				year: new Date().getFullYear(),
				//获取当前月份(0-11,0代表1月)
				month: new Date().getMonth()+1,

			}
		},
		watch: {
			month: function(newVal, oldVal) {
				if (newVal != oldVal) {
					this.getWeek();
				}
			}
		},
		created() {
			// console.log('123', this.time)
		},
		mounted() {			
			this.getWeek()
			
		},
		methods: {
			getWeek(){
				let weeksMon = []
				for(var i=1;i<=getWeekNumber.getWeeks(this.year, this.month, 0);i++){
					let week = getWeekNumber.getWeekTime(this.year, this.month,i)
					weeksMon.push(week)		
				}
				this.weeksData = weeksMon
				// console.log("weeksMon: ",weeksMon);
			},
			toSeleWeek(item,index){
				this.chooseWeek = index
				console.log("this.chhose: ",index);
				let objWeek = {
					weeks:item,
					from : item.substring(0,10),
					to : item.substring(item.length-10,item.length),
					from1: item.substring(0, 4) + '-' + item.substring(5, 7) + '-' + item.substring(8, 10),
					to1: item.substring(13, 17) + '-' + item.substring(18,20) +'-'+ item.substring(item.length - 2, item.length)
				} 
				// console.log("val: ", objWeek);
				this.$emit("toSeleWeek", objWeek)
			},
			// 获取
			reduceYear() {
				var m = this.month
				this.month = m - 1	
				if (m==1) {
					this.year = this.year - 1
					this.month = 12
				}
				this.$emit('changeYear', this.year,m)
			},
			addYear() {
				var m = this.month
				this.month = m +1	
				if (m==12) {
					this.year = this.year + 1
					this.month = 1
				}
				
				this.$emit('changeYear', this.year)
			},
		},
		computed: {}
	}
</script>
<style lang="less" scoped>
	.CalendarMonth {
		padding: 30rpx;
		.year {
			margin: 0 0 20rpx;
			font-weight: 700;
			font-size: 18px;
		}

		.monthList {
			// background-color: #fff;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			.month {
				padding: 20rpx 30rpx;
				border-radius: 10rpx;

				width: 80%;
				// height: 50px;
				margin: 6px;
				text-align: center;
			}

			.contentDes {
				width: 14%;
				padding: 0rpx;
			}

			.currentDate {
				// border-radius: 50%;
				background-color: #EC8F25;
			}

			.currentMonth {
				// background-color: rgb(169, 225, 243);
				background-color: #EC8F25;
			}
		}
	}
</style>

  第四步：根据实际要求运用组件

//应用组件
<calendar-week @toSeleWeek="toSeleWeek($event)"></calendar-week>

//导入组件
import calendarWeek from '@/conpontents/calendarWeeks/index.vue'

	export default {

		components: {
			calendarWeek
		},

        //根据具体要求操作
        toSeleWeek(e) {
				console.log('选择了' + e.weeks)
		},

    }