美文网首页
创建日历数组数据(用于自定义日历组件)

创建日历数组数据(用于自定义日历组件)

作者: PharkiLL | 来源:发表于2023-03-13 10:47 被阅读0次
/**
 * @param {Number} 想生成的月份
 * @returns {Array} 月份数据
 */
function initMonthDays(currentMonth) {
    let d = new Date()
    d.setMonth(currentMonth - 1) // 设置当前月
    d.setDate(1) // 设置为当月的1号
    let monthList = []
    let count = 0
    let nextMonthCount = 0
    for (let i = 0; i < 6; i++) {
        let weekList = new Array(7);
        if (i === 0) { // 当月第一周
            for (let index = d.getDay() - 1; index < weekList.length; index++) {
                weekList[index] = ++count
            }
        } else { // 剩余的周
            for (let index = 0; index < weekList.length; index++) {
                count++
                if (count <= getDaysOfMonth(d.getMonth())) {
                    weekList[index] = count
                } else { // 补充下个月的号数
                    weekList[index] = ++nextMonthCount
                }
            }
        }
        monthList.push(weekList);
    }

    // 补充上个月的号数
    let preMonthDay = getDaysOfMonth(d.getMonth() - 1)
    for (let index = d.getDay() - 2; index >= 0; index--) {
        monthList[0][index] = preMonthDay--
    }
    return monthList
}


/**
 * @param {Date} currentMonth 当前月份
 * @returns {Number} 当前月的最后一天是多少号
 */
function getDaysOfMonth(currentMonth) {
    let date = new Date()
    date.setMonth(currentMonth + 1)
    date.setDate(0)
    return date.getDate()
}
const monthDaysArr = initMonthDays(3)
console.log(monthDaysArr);

相关文章

  • 利用PowerQuery自定义函数法创建日历表

    利用PowerQuery自定义函数法创建日历表

  • Android自定义View实现日历界面(带点击和历史标记)

    1、自定义view日历星期 2、简单自定义日历界面 3.xml代码 4.自定义日历界面带标记界面 5.自定义日历带...

  • 推荐简约漂亮的小程序插件 calendar

    公司团队制作,主要用于内部使用,觉得这个感觉不错,所以推荐出来,让大家试试~ 日历功能 日历基本功能,自定义样式 ...

  • 日历组件

    1. pc日历 http://www.my97.net/dp/demo/index.htm http://tlia...

  • 日历组件

  • 日历组件

    页面引用日历组件 数据双向绑定,监听组件得年份和月份得变化 1613692800000 2021-02-19...

  • 日历组件

    日历展现形式普通文档流弹出层 isMask 灵活控制星期的排列、星期的显示格式、月份的显示格式1月 一月 Jan...

  • 日历组件

    前言:由于业务的需求,需要一个日历组件,查阅挺多组件,发现与实际业务需求有点区别,特别是后期样式修改挺麻烦的,所以...

  • pc端个性化日历实现

    一、实现日历组件 二、个性化日历使用

  • 创建日历

    由于样式需求,日历需要自定义。看网上日历一般每个月显示6行。所有用一下函数生成一个月显示的所有日期。 返回的数组每...

网友评论

      本文标题:创建日历数组数据(用于自定义日历组件)

      本文链接:https://www.haomeiwen.com/subject/tplcrdtx.html