VUE实现日期多选，采用vue-calendar-componen插件(改造之-可以多段禁用)

yixiaojing527

已于 2023-03-01 18:35:54 修改

阅读量1.9k

点赞数

分类专栏：时间组件文章标签： vue.js 前端 javascript Powered by 金山文档

于 2023-03-01 17:48:12 首次发布

本文链接：https://blog.csdn.net/yixiaojing527/article/details/129286333

版权

本文介绍如何改造vue-calendar-componen插件，使其支持多段日期禁用。通过修改calendar.vue文件中的getList方法，利用k.dayHide控制禁用日期。改造后，组件可直接在项目中导入并使用。改造过程包括复制原组件源码并修改所需部分，无需改动calendat.js和index.js。

摘要由CSDN通过智能技术生成

由于vue-calendar-componen插件虽然支持多选,但是无法实现多禁用,且样式有些许不适,咋直接把源码扒下来进行改造,在自己的项目里创建components组件,改造好直接项目使用就ok了!

原三个文件calendar.js/calendar.vue/index.js 全部直接copy下来,对calendar.vue文件的getList方法进行改造,关键字k.dayHide则刻意控制禁用的数据.

calendat.js文件未变

export default {
    // 当某月的天数
    getDaysInOneMonth(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const d = new Date(year, month, 0);
        return d.getDate();
    },
    // 向前空几个
    getMonthweek(date) {
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const dateFirstOne = new Date(year + '/' + month + '/1');
        return this.sundayStart ?
            dateFirstOne.getDay() == 0 ? 7 : dateFirstOne.getDay() :
            dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1;
    },
    /**
     * 获取当前日期上个月或者下个月
    */
    getOtherMonth(date, str = 'nextMonth') {
        const timeArray = this.dateFormat(date).split('/');
        const year = timeArray[0];
        const month = timeArray[1];
        const day = timeArray[2];
        let year2 = year;
        let month2;
        if (str === 'nextMonth') {
            month2 = parseInt(month) + 1;
            if (month2 == 13) {
                year2 = parseInt(year2) + 1;
                month2 = 1;
            }
        } else {
            month2 = parseInt(month) - 1;
            if (month2 == 0) {
                year2 = parseInt(year2) - 1;
                month2 = 12;
            }
        }
        let day2 = day;
        const days2 = new Date(year2, month2, 0).getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }
        if (day2 < 10) {
            day2 = '0' + day2;
        }
        const t2 = year2 + '/' + month2 + '/' + day2;
        return new Date(t2);
    },
    // 上个月末尾的一些日期
    getLeftArr(date) {
        const arr = [];
        const leftNum = this.getMonthweek(date);
        const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1;
        const preDate = this.getOtherMonth(date, 'preMonth');
        // 上个月多少开始
        for (let i = 0; i < leftNum; i++) {
            const nowTime = preDate.getFullYear() + '/' + (preDate.getMonth() + 1) + '/' + (num + i);
            arr.push({
                id: num + i,
                date: nowTime,
                isToday: false,
                otherMonth: 'preMonth',
            });
        }
        return arr;
    },
    // 下个月末尾的一些日期
    getRightArr(date) {
        const arr = [];
        const nextDate = this.getOtherMonth(date, 'nextMonth');
        const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date);
        const _length = 7 - leftLength % 7;
        for (let i = 0; i < _length; i++) {
            const nowTime = nextDate.getFullYear() + '/' + (nextDate.getMonth() + 1) + '/' + (i + 1);
            arr.push({
                id: i + 1,
                date: nowTime,
                isToday: false,
                otherMonth: 'nextMonth',
            });
        }
        return arr;
    },
    // format日期
    dateFormat(date) {
        date = typeof date === 'string