更新记录

1.0.5(2023-05-20) 下载此版本

.

1.0.4(2023-04-06) 下载此版本

1.0.4更新了图标

1.0.1(2023-04-05) 下载此版本

[1.0.1]

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.2 app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

代码块

直接引入就可以使用,代码如下:

<template>
    <view class="content">
        <zeng-calen  :actDay="actDay" :chooseDay="chooseDay" @onDayClick='onDayClick'></zeng-calen>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                actDay: [], //用户选择的日期
                chooseDay: ["2023-04-13", "2023-04-15", "2023-04-16", "2023-04-05"], //已被投标的数据
            }
        },
        onLoad() {

        },
        methods: {
            // 展开日历
            onDayClick(data) {
                let choose = data.date //用户点中的数据
                if (this.actDay.includes(choose)) { //如果用户点击的日期已经存在
                    // 移除元素下标
                    const index = this.actDay.indexOf(choose);
                    //删除用户点击的日期
                    this.actDay.splice(index, 1)
                } else if (this.chooseDay.includes(choose)) { //判断是否已经被投标
                    uni.showToast({
                        title: "这个日期已经被投标了",
                        icon: "none"
                    })
                } else {
                    //添加用户点击的日期
                    this.actDay.push(choose)
                }
            },
        }
    }
</script>

<style>

</style>

Calendar Props:

属性名 类型 默认值 说明
weekstart Number 0 星期几为第一天(0为星期日)
markDays Array null 已标记的日期
headerBar Boolean true 是否展示月份切换按钮
disabledAfter Boolean false 过去日期是否不可点击
actDay Array null 接收用户选择的参数
chooseDay Array null 接受已经被选择的参数

Calendar Events:

事件 说明
onDayClick 选中的日期

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问