根据年月周获取 当周的日期

本文介绍了一种根据用户选择的年月及周数,计算特定周的起始与结束日期的方法。通过自定义函数获取指定月份的天数、计算周数,并格式化日期,实现了周历的准确计算。

在工作中碰到了一个需求,根据用户选择的年月以及当月的第几周,输出这周的开始日期与结束日期,在网上搜了一下,发现大家的第一周一般都是从第一个周一开始计算的,与我们从本月一号开始算第一周的需求不太一致,于是自己写了一个方法:

        // 获取指定月份的天数
        function mGetDate(year, month){
            var d = new Date(year, month, 0);
            return d.getDate();
        }
		// 根据年月日获取是周几
        function getMonthWeek(year, month, day) {
            var date = new Date(year, month-1, day), w = date.getDay(), d = date.getDate();
            return Math.ceil(
                (d + 6 - w) / 7
            );
        }
		 // 获取输入周的开始与结束日期
        function getWeekDate(year, month, week){
            var days = mGetDate(year,month);
            var weekArr = [];
            for(var i=1;i<=days;i++){
                var weekNum = getMonthWeek(year,month,i);
                console.log(weekNum,i)
                var data = new Date(year, month-1, i);
                if(i==1){
                    weekArr[0] = new Array();
                    weekArr[0].push(formatTime(data));
                }else{
                    var weekNumLast = getMonthWeek(year,month,i-1)
                    if(weekNumLast == weekNum){
                        if(data.getDay()==1){
                            weekArr[weekNum-1] = new Array();
                            weekArr[weekNum-1].push(formatTime(data));
                        }else{
                            weekArr[weekNum-1].push(formatTime(data));
                        }
                    }else{
                        if(data.getDay()==0){
                            weekArr[weekNum-2].push(formatTime(data))
                        }else{
                            weekArr[weekNum-1].push(formatTime(data))
                        }
                    }
                }
            }
            return weekArr[week-1][0],weekArr[week-1][weekArr[week-1].length-1];
        }
		// 时间格式化
        function formatTime (date){
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()
            return [year, month, day].map(formatNumber).join('-');
        }
        function formatNumber (n){
            n = n.toString()
            return n[1] ? n : '0' + n
        }

        getWeekDate(2020,7,2)
在 Vue 项目中,若需根据给定的年份和月份获取该月的所有日期列表,通常可以通过 JavaScript 的 `Date` 对象结合 Vue 的响应式机制实现。以下是一个完整的实现方式,包括获取指定月份的天数、生成日期列表,并结合 `dayjs` 或 `moment` 等库进行日期处理。 ### 获取指定年月的全部日期列表 首先,可以使用原生 `Date` 对象获取指定月份的天数: ```javascript function getMonthDays(year, month) { const date = new Date(year, month, 0); return date.getDate(); // 返回当月的总天数 } ``` 结合 Vue 的 `data` 和 `methods`,可以动态生成指定年月日期数组: ```vue <template> <div> <input v-model.number="year" type="number" placeholder="年份" /> <input v-model.number="month" type="number" placeholder="月份" /> <button @click="generateDates">生成日期列表</button> <ul> <li v-for="(date, index) in dates" :key="index">{{ date }}</li> </ul> </div> </template> <script> export default { data() { return { year: new Date().getFullYear(), month: new Date().getMonth() + 1, dates: [] }; }, methods: { getMonthDays(year, month) { const date = new Date(year, month, 0); return date.getDate(); }, generateDates() { const days = this.getMonthDays(this.year, this.month); const dateList = []; for (let i = 1; i <= days; i++) { const day = i < 10 ? `0${i}` : i; const month = this.month < 10 ? `0${this.month}` : this.month; dateList.push(`${this.year}-${month}-${day}`); } this.dates = dateList; } } }; </script> ``` ### 使用 `dayjs` 或 `moment` 进行日期处理 如果项目中使用了 `dayjs` 或 `moment`,可以通过它们更便捷地处理日期格式和操作。例如,使用 `dayjs` 实现上述功能: ```bash npm install dayjs ``` ```javascript import dayjs from 'dayjs'; export default { data() { return { year: dayjs().year(), month: dayjs().month() + 1, dates: [] }; }, methods: { generateDates() { const startOfMonth = dayjs(`${this.year}-${this.month}-01`); const daysInMonth = startOfMonth.daysInMonth(); const dateList = []; for (let i = 1; i <= daysInMonth; i++) { const date = dayjs(`${this.year}-${this.month}-${i}`); dateList.push(date.format('YYYY-MM-DD')); } this.dates = dateList; } } }; ``` ### 表格展示与三级表头处理 若需将日期信息以表格形式展示并支持三级表头,可参考以下结构: ```vue <template> <table> <thead> <tr> <th colspan="7">年份:{{ year }}</th> </tr> <tr> <th colspan="7">月份:{{ month }}</th> </tr> <tr> <th v-for="day in ['日', '一', '二', '三', '四', '五', '六']" :key="day">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="(week, index) in weeks" :key="index"> <td v-for="date in week" :key="date"> {{ date }} </td> </tr> </tbody> </table> </template> ``` 通过将日期数组按照进行分组,可实现完整的日历展示功能。 ### 相关问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值