基于elementui月历组件实现自定义格式，获取插件显示的第一天和最后一天

Very charming

已于 2024-09-03 18:15:34 修改

阅读量201

点赞数 2

文章标签： elementui 前端 javascript

于 2024-09-03 18:07:05 首次发布

本文链接：https://blog.csdn.net/weixin_49059194/article/details/141867801

版权

为了实现自定义需要给后端传递起始日期

获取起始日期（基于业务写的公共的方法）

 /**
         * 员工日报 日历组件 按周显示日期 获取起始日期
         * */
         Vue.prototype.$findPreviousMonday = function (date) {
            let startDate = ''
            // 确保传入的date是本月的第一天  
            let firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
            let dayOfWeek = firstDayOfMonth.getDay();
            if (dayOfWeek == 0) {
                // 周日设置为零会导致当当月的1号 所在周的起始日期 计算错误
                dayOfWeek = 7
            }
            // 如果1号是礼拜一，则不需要找，但这里我们假设它不是  
            if (dayOfWeek !== 1) {
                // 从本月1号开始往前数，直到找到礼拜一  
                let previousMonday = new Date(firstDayOfMonth);
                previousMonday.setDate(previousMonday.getDate() - dayOfWeek + 1); // 调整为上一个星期一  


                // 打印结果，注意这里我们不需要检查它是否在上个月，因为从1号往前数肯定在上个月  
                startDate = formatDate(previousMonday)
            } else if (dayOfWeek == 1) {
                // 如果是礼拜一的时候
                let previousMonday = new Date(firstDayOfMonth);
                startDate = this.$dateformat(previousMonday, 'yyyy-mm-dd')
            }

            // 格式化日期函数  
            function formatDate(date) {
                let yyyy = date.getFullYear();
                let MM = ('0' + (date.getMonth() + 1)).slice(-2);
                let dd = ('0' + date.getDate()).slice(-2);
                return `${yyyy}-${MM}-${dd}`;
            }
            return startDate;
        }

获取月份组件最后一日

 /**
         * 员工日报 日历组件 按周显示日期 获取 月份最后一日
         * */
         Vue.prototype.$getLastDayOfMonth = function (today) {
            let nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
            let endDate = ''
            // 减去一天得到本月的最后一天  
            let lastDayOfMonth = new Date(nextMonth - 1);

            // 检查最后一天是否是周日  
            if (lastDayOfMonth.getDay() === 0) {
                // 如果是周日，直接打印  
                // console.log(`本月的最后一天是周日: ${lastDayOfMonth.toISOString().split('T')[0]}`);
                endDate = lastDayOfMonth.toISOString().split('T')[0]
            } else {
                // 如果不是周日，找到那一周的周日  
                let sundayOfThatWeek = new Date(lastDayOfMonth.getTime() + ((7 - lastDayOfMonth.getDay()) % 7) * 86400000);
                // 打印找到的周日  
                // console.log(`本月的最后一天不是周日，但所在周的周日是: ${sundayOfThatWeek.toISOString().split('T')[0]}`);
                endDate = sundayOfThatWeek.toISOString().split('T')[0]

            }
            return endDate;
         }

打印出来的结果如图

传递的数据格式

 mounted() {

        this._type()

        this.removeBtn()

        let now = new Date();

        this.findPreviousMonday(new Date(now.getFullYear(), now.getMonth(), 1)) //

        this.getLastDayOfMonth(now);

}
methods: {
       // 计算日历组件的 起日
        findPreviousMonday(date) {
            this.startDate = this.$findPreviousMonday(date)
            console.log(this.startDate,'起始的日期---?')
        },
        // 计算日历组件的 止日
        getLastDayOfMonth(today) {
            this.endDate = this.$getLastDayOfMonth(today)
            console.log(this.endDate, '最后的周日')
            this._page()
        },
}