更新记录

1.0.5（2025-11-29） 下载此版本

新增全面的日期验证机制，支持字符串、数字和Date对象多种输入格式 修复"回到今日"按钮年份显示不准确的问题 添加完整的PropTypes类型检查

1.0.4（2025-11-29） 下载此版本

本次更新内容 (2025-11-29)

1.0.3（2024-11-29） 下载此版本

出现打不开的报错修复

平台兼容性

uni-app(4.61)

uni-app x(4.56)

📅 lfj-calendar (日历选择器组件)

🔍 功能概述

lfj-calendar 是一个基于 UniApp 框架开发的高性能、多功能日历选择器组件，支持以下核心功能：

• 📅 支持日视图和周视图两种模式自由切换
• 📆 支持自定义日期格式和多种日期输入类型
• 🔖 支持打点标记特殊日期
• 🎨 支持高度自定义样式
• 📱 完美适配 H5、小程序、App 多端

🌟 主要特性

1. 强大的日期处理能力

• 支持多种日期输入格式：
  • 字符串格式 YYYY-MM-DD
  • 数字类型的毫秒数
• 内置日期验证机制
• 自动处理无效日期输入

2. 灵活的视图模式

// 轻松切换视图模式
changeMode() {
  this.weekMode = !this.weekMode; // 切换周/月视图
}

• 周视图：展示一周的日期
• 月视图：展示整月的日期
• 自动计算并显示当前周/月的范围

3. 交互优化

• 支持滑动切换月份/周
• 智能缓存机制，减少重复计算
• 平滑的动画过渡效果
• 点击日期即时反馈

4. 样式定制

• 支持自定义今日样式
• 支持自定义选中日期样式
• 支持自定义打点样式
• 支持通过 CSS 完全自定义外观

📦 使用方式

1. 安装

https://ext.dcloud.net.cn/plugin?id=21178

2. 基础用法

<template>
    <view>
        <lfj-calendar v-model="date" @selected="handleSelect" />
    </view>
</template>

<script>
    export default {
        data() {
            return {
                date: '2024-11-29',
            };
        },
        methods: {
            handleSelect(event) {
                console.log('选中日期:', event.date);
            },
        },
    };
</script>

3. 高级配置

<lfj-calendar
    v-model="date"
    :title="'选择日期'"
    :duration="300"
    :todayClass="'custom-today'"
    :checkedClass="'custom-checked'"
    :dotList="specialDates"
    :dotClass="'custom-dot'"
    @selected="handleSelect" />

📋 API 文档

Props

Events

Methods

🚀 性能优化

1. 智能缓存：

   • 自动缓存已生成的日期数据
   • 减少重复计算
   • 提高滚动性能

2. 按需渲染：

   • 只渲染当前视图的日期
   • 隐藏非当前视图的日期

3. 高效计算：

   • 使用计算属性缓存复杂计算
   • 避免在模板中进行复杂运算

💡 使用建议

1. 日期验证：

// 建议在接收日期前进行验证
methods: {
  validateDate(date) {
    return /^\d{4}-\d{2}-\d{2}$/.test(date);
  }
}

2. 性能优化：

   • 避免频繁切换视图模式
   • 对于大数据量，考虑使用虚拟滚动
   • 合理设置动画时长

3. 样式定制：

/* 自定义今日样式 */
.is-today {
    background-color: #ff0000;
    color: #ffffff;
}

/* 自定义选中样式 */
.is-checked {
    background-color: #00ff00;
    color: #333333;
}

📂 文件结构

lfj-calendar/
├── components/
│   └── lfj-calendar/
│       ├── js/
│       │   └── generateDates.js  # 日期处理工具
│       ├── lfj-calendar.vue     # 主组件
│       └── readme.md            # 组件文档
└── package.json

🎯 适用场景

• 需要日期选择功能的移动端应用
• 需要显示日历视图的后台管理系统
• 需要标记特殊日期的日程应用
• 需要多端适配的日期选择器