更新记录

1.0.1（2025-06-03） 下载此版本

优化界面

1.0.0（2025-05-23） 下载此版本

ba-calendar 日历 支持多颜色标记

平台兼容性

uni-app

其他

日历 ba-calendar

简介

• 两种显示方式：页面插入、弹窗显示
• 支持显示日期、选择日期
• 支持单选日期、多选日期（范围选择range）
• 支持显示农历
• 支持设置日期范围
• 支持打点标签（文本、颜色、圆点）

有建议和需要，请联系

也可关注博客，实时更新最新插件：

uniapp 常用原生插件大全

安装方式

本组件符合easycom规范，只需将本组件导入项目，在页面template中即可直接使用。

基本用法（插入页面）

在 template 中使用组件

<view>
    <ba-calendar 
    :insert="true"
    :lunar="true" 
    :start-date="'2019-3-2'"
    :end-date="'2019-5-20'"
    @change="change"
     ></ba-calendar>
</view>

弹窗方式打开日历

需要设置 insert 为 false

<view>
    <uni-calendar 
    ref="calendar"
    :insert="false"
    @confirm="confirm"
     ></uni-calendar>
     <button @click="open">打开日历</button>
</view>

export default {
    data() {
        return {};
    },
    methods: {
        open(){
            this.$refs.calendar.open();
        },
        confirm(e) {
            console.log(e);
        }
    }
};

API

Calendar 参数

selected 选中的内部参数

Calendar 事件