更新记录

1.1.1（2021-10-14）

修复微信小程序不兼容问题

1.1.0（2021-10-14）

更新解决了小程序运行会报错 ：Property value expected type of string but got null 问题

1.0.0（2021-10-13）

开箱即用

用法和 Vant 的日历组件类似，但并不是完全一样！！！！

文档懒得写了，大家将就看看每个参数的作用吧~哈哈哈哈哈

props: { type: { type: String, default: 'single', desc: '选择类型: single表示选择单个日期、multiple表示选择多个日期、range表示选择日期区间' }, color: { type: String, default: '#FF960A', desc: '主题色，对底部按钮和选中日期生效' }, title: { type: String, default: '日期选择', desc: '标题，日期面板顶部标题' }, btnTitle: { type: String, default: '确定', desc: '按钮文案，底部按钮文案' }, isMask: { type: Boolean, default: true, desc: '是否开启遮罩层', },

        isMarkClick:{
            type: Boolean,
            default: true,
            desc: '是否开启遮罩层关闭',
        },
        btnColor: {
            type: String,
            default: undefined,
            desc: '按钮颜色，底部按钮颜色'
        },
        minDate: {
            type: Date,
            default: function() {
                return new Date()
            },
            desc: '可选择的最小日期'
        },
        maxDate: {
            type: Date,
            default: function() {
                return new Date((new Date().getFullYear() + 1), new Date().getMonth(), 1)
            },
            desc: '可选择的最大日期'
        },
        show: {
            type: Boolean,
            default: false,
            desc: '是否显示日历弹窗'
        },
        position: {
            type: String,
            default: 'bottom',
            desc: '弹出位置，可选值为 top | right | left | bottom'
        },
        lunar: {
            type: Boolean,
            default: true,
            desc: '是否显示农历，可选值为 true | false'
        },
        showButton: {
            type: Boolean,
            default: true,
            desc: '是否显示底部按钮，可选值为 true | false'
        },
        fullScreen:{
            type: Boolean,
            default: false,
            desc: '是否全屏日历，可选值为 true | false（左侧和右侧弹出时只能全屏）'
        },
        showClose: {
            type: Boolean,
            default: true,
            desc: '是否显示关闭按钮，可选值为 true | false'
        },
        closeImg: {
            type: String,
            default: 'undefined',
            desc: '右上角关闭按钮图标'
        },
        poppable: {
            type: Boolean,
            default: true,
            desc: '是否以弹层的形式展示日历'
        },
        formatter: {
            type: Function,
            default: function() {
                return {}
            },
            desc: '日期格式化函数'
        },
    },

平台兼容性

组件参数说明

组件参数

Day数据结构

日历中的每个日期都对应一个Day对象，通过formatter属性可以自定义Day对象内容

下载之后把components/wpc-calendar目录底下的wpc-calendar.vue搬运到自己项目的公用components文件里面，然后直接引入开始使用！