项目场景：

项目中需要实现一个月日历的功能,通过dayjs进行封装实现获取一个月共有多少天,通过获取到的数据渲染生成日历

功能流程

根据输入的时间,利用dayjs获取每月第一天及最后一天
在while循环中使用isBefore方法,生成当月数据
通过dayjs中的day()方法获取星期,根据星期添加日历中上月天数
日历中下月天数通过 42减去 dayjs中daysInMonth()方法加上月天数
最后将moment格式日期进行格式化处理

代码实现

  //e:`2023-1`const getMonth = e => {const startDay = dayjs(e).startOf('month');const endDay = dayjs(e).endOf('month');let list = [];let currentDay = startDay;while (currentDay.isBefore(endDay)) {list.push({ day: currentDay });currentDay = currentDay.add(1, 'day');}//上个月补充let week = list[0].day.day();if (week == 0) {week = 7;}for (let i = 1; i < week; i++) {// ishow:区分是否是本月日期list.unshift({ day: startDay.add(-i, 'day'),isShow:false });}//下个月补充   42:日历中的六周 * 一周七天let nextWeek = 42 - (dayjs(e).daysInMonth() + week - 1);for (let i = 1; i <= nextWeek; i++) {// ishow:区分是否是本月日期list.push({ day: endDay.add(i, 'day'), isMonth: false })}list.forEach(item => {let str = item.day.$d.toLocaleDateString().replaceAll('/', '-');item.time = dayjs(str).format("YYYY-MM-DD")});console.log("本月天数",list)return list};

效果展示

获取一个月有多少天,生成日历相关推荐

vue获取一个月有多少天
需求:获取一个月有多少天实现代码: // 获取一个月有多少天,curDate是开始日期,获取这个日期的月份的天数getCountDays(curDate) {const d = new Date(c ...
python获取一个月有多少天
可以使用 Python 的 calendar 模块来获取一个月有多少天. 首先,需要导入 calendar 模块: import calendar 然后,可以使用 calendar.monthrang ...
java计算一个月有几周_java 如何获取一个月有多少周
展开全部你说需要计算一个月有多少周,若是指,一月,二月一直到十二月每个月有多少周的话,可以用32313133353236313431303231363533e59b9ee7ad94313333613 ...
（03）JS/VUE获取一个月有多少天
方法一: new Date()第3个参数默认为1,就是每个月的1号,把它设置为0时, new Date()会返回上一个月的最后一天,然后通过getDate()方法得到天数 function getMo ...
js 获取一个月有多少天的方式
方法一:new Date()第3个参数默认为1,就是每个月的1号,把它设置为0时, new Date()会返回上一个月的最后一天,然后通过getDate()方法得到天数 function getMon ...
PHP获取一个月有多少天
直接上代码: /** 获取当月有多少天* @param date $unix* return int*/public static function getDaysByMonth($unix){$mo ...
calendar获取月份少一个月_VBA 技巧：计算一个月有多少天？
VBA 技巧:计算一个月有多少天? 问题: 有时我们需要知道一个月有多少天,或者知道最后一天是31号还是30号我们可以通过VBA代码来计算 Sub nb_days_month()'将日期传入变量,月 ...
PHP获取一年有多少天、一个月有多少天(最全最新)
获取一年有多少天|一个月有多少天详情请去网站: 如果浏览不顺畅请到原文章出处:https://www.sky8g.com/technology/2670/ 请注意可能会提示风险,这是csdn官网如果不 ...
JS获取当前日期，获取上个月的日期，一个月有多少天
小程序.H5 获取日期 // 获取时间不满两位补0formatTen: function (num) {return num > 9 ? (num + "") : (&quo ...

获取一个月有多少天,生成日历

项目场景：

功能流程

代码实现

效果展示

获取一个月有多少天,生成日历相关推荐

最新文章

热门文章