最近在写后台管理系统，遇到以下的要求，就是要展示年月日和周几和第几周的情况。

下面记录一下用到的函数：

1.跟据日期获取第几周

//根据日期获取第几周
getWeek(dateTime) {var time,week,checkDate = new Date(dateTime);checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));time = checkDate.getTime();checkDate.setMonth(0);checkDate.setDate(1);week = Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;return week;
},

2. 跟据年月获取整个月中的周数和周几等

2.1 `moment`插件的引入与注册

下面用到了moment方法，因为我这边是vue-cli搭建的项目，所以是安装了moment插件，在页面上引入了moment

import moment from 'moment';

methods: {moment,...}

2.2 `initDate`获取指定日期的周数等信息

initDate(month) {let weekArrayList = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六',];var weeks = []; // template中用来渲染日历的数组var date = {};var firstDay = this.moment(month, 'YYYY/M'); // 当月1号var week = firstDay.format('d'); // 当月1号是周几 (比如周五则week = 5)var start = firstDay.subtract(week, 'days'); // 日历上展示的第一个数(上个月的二十几号之类的，用于补齐日历)for (var i = 0; i < 6; i++) {var days = [];for (var j = 0; j < 7; j++) {var day = {};day.day = start.toObject().date; // 当前号数 22day.num = null; // 当前号数 22day.date = start.format('YYYY/M/D'); // 返回值为2021-10-22//星期几let index = new Date(day.date).getDay();day.week = weekArrayList[index];day.wk = this.getWeek(day.date);day.month = start.format('M'); // 当前号数对应的月份，比如日历上个月27号则day.month = 9;这个月1号day.month = 10day.isWeekend =start.format('E') === '6' || start.format('E') === '7'? true: false; // 是否是周末，用于UI区分周末和平时的颜色start.add(1, 'days'); // 没循环一次日期加一天days.push(day);}weeks.push(days);}date.year = this.moment(month).year();date.month = this.moment(month, 'YYYY/M').add(0, 'month').format('M');date.preMonth = this.moment(month, 'YYYY/M').add(-1, 'month').format('YYYY/M');date.nextMonth = this.moment(month, 'YYYY/M').add(1, 'month').format('YYYY/M');console.log('weeks', weeks);return weeks;},

最后返回的数据结构如下：

2.3 上面二维数组转为一维数组的解决方法

var weeks = this.initDate(this.queryParam.date);
this.weeks = [];
weeks.forEach((row) => {row.forEach((item) => {if (moment(new Date(item.date)).format('YYYY-MM') ==this.queryParam.date) {this.weeks.push({week: item.week,date: moment(new Date(item.date)).format('MM-DD'),wk: item.wk,num: null,fullDate: moment(new Date(item.date)).format('YYYY-MM-DD'),});}});
});

最后返回的数据结构如下：

3. 计算上个月的最后一天

getLastMonthDate(year, month, flag) {console.log(year, month, flag);if (month == 1 && !flag) {month = 12;year = year - 1;} else if (month != 1 && !flag) {month -= 1;}var myDate = new Date(year, month, 0);console.log(111, year, month, myDate);// var startDate = year + '-' + month + '-01 00:00:00' //上个月第一天var endDate = year + '/' + month + '/' + myDate.getDate(); //上个月最后一天return endDate;
},

函数的用法：

this.getLastMonthDate(Number(this.moment(this.queryParam.date).format('YYYY')),//获取检索条件中的年Number(this.moment(this.queryParam.date).format('M')),//获取检索条件中的月true,//本月的最后一天
);
this.getLastMonthDate(Number(this.moment(this.queryParam.date).format('YYYY')),//获取检索条件中的年Number(this.moment(this.queryParam.date).format('M')),//获取检索条件中的月
);
//传入第三个参数为true，就是获取本月的最后一天，否则就是获取上个月的最后一天

4. 三级表头的添加

let wkArr = [];
this.weeks.forEach((item) => {if (wkArr.indexOf(item.wk) == -1) {wkArr.push(item.wk);}
});
var arr = [];
wkArr.forEach((w) => {arr.push({title: 'wk' + w,wk: w,align: 'center',children: [],});
});
this.weeks.forEach((item) => {arr.forEach((a) => {if (a.wk == item.wk) {a.children.push({title: item.date,align: 'center',children: [{title: item.week,align: 'center',scopedSlots: { customRender: 'num' + item.date },width: 100,},],});}});
});
//此时的arr就是表格中的columns数据了

最终效果如下：

vue项目——获取指定日期是周几和第几周的信息——表格展示相关推荐

MySQL获取指定日期为所在月份的第几周
目录直接查看结果最近做项目遇到一个看起来很简单的需求--按周统计一个月内的关卡延期次数,这里我需要得到一个日期是它所在月份的周次,如今天'2022-05-27'是本月的第5周. 本来我觉得很简单, ...
获取指定日期所在周的每一天的日期（周一，周二，周三，周四，周五到周末）
最近项目用到,特此记录. public class Test {public static void main(String[] args) {System.out.println(getNeedDa ...
使用Calendar类获取指定日期所在年/月份、周第一天、最后一天
最近做项目有涉及需要获取指定日期或当前日期所在月份和周第一和最后一天,结合网上的资料和自己项目开发记录,记录下用到的这些方法. 目录 1.获取指定年份的第一天和最后一天 2. 获取指定日期月份第一天和 ...
获取指定日期之间的各个周和月
2019独角兽企业重金招聘Python工程师标准>>> 日志格式化类 Date.class.php <?php class Datefmt{function __constru ...
java获取指定日期的所在周的第一天（周一）
java获取指定日期的所在周的第一天(周一) private static void getWeekByDate(Date time) {SimpleDateFormat sdf = new Simp ...
JAVA实现获取指定日期所在的周的所有日期
需求:获取指定日期所在的周的所有日期思路:获取指定日期所在的周的第一天,即周一的日期,设置日历的日期为那一天,依次取七天的日期实现: package com.day0405;import java ...
JS获取指定日期前后N天的日期、前N个月日期、后N个月日期
今天做项目遇到了,获取相对于当前日期前30天的时间,结合网上资料,做了一份整理. 一.获取指定日期前或者后指定间隔时间代码 function getNowFormatDate(sdate,interv ...
获取指定日期的常用前后节点（月初月末周一周末等等）
获取指定日期的常用前后节点(月初月末周一周末等等) 原文:获取指定日期的常用前后节点(月初月末周一周末等等) 注:周节点方面是根据中国习惯,视周一为起,周日为末. /*---------------- ...
JAVA获取指定日期
JAVA获取指定日期获取前/后(月.天.小时)时间获取上月: 得到一个月最后一天日期(31/30/29/28) 获取本日日期获取本周一日期获取本周日日期获取本月日期 java项目中经常需要用 ...

vue项目——获取指定日期是周几和第几周的信息——表格展示

1.跟据日期获取第几周

2. 跟据年月获取整个月中的周数和周几等

2.1 `moment`插件的引入与注册

2.2 `initDate`获取指定日期的周数等信息

2.3 上面二维数组转为一维数组的解决方法

3. 计算上个月的最后一天

4. 三级表头的添加

vue项目——获取指定日期是周几和第几周的信息——表格展示相关推荐

最新文章

热门文章

vue项目——获取指定日期是周几和第几周的信息——表格展示

1.跟据日期获取第几周

2. 跟据年月获取整个月中的周数和周几等

2.1 moment插件的引入与注册

2.2 initDate获取指定日期的周数等信息

2.3 上面二维数组转为一维数组的解决方法

3. 计算上个月的最后一天

4. 三级表头的添加

vue项目——获取指定日期是周几和第几周的信息——表格展示相关推荐

最新文章

热门文章

2.1 `moment`插件的引入与注册

2.2 `initDate`获取指定日期的周数等信息