# 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;
},

<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)
},

}

• 0
点赞
• 4
收藏
觉得还不错? 一键收藏
• 1
评论
08-23 2049
04-24 1810
10-23
10-17
03-07 1428
06-03 3119
09-06 3388
07-06 9480
04-09 9846
11-19 5964
05-08 2392
08-03 1102

### “相关推荐”对你有帮助么？

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。