更新记录

0.3.0（2025-05-22）

新增

• 添加确定按钮，优化日期选择交互
• 支持自定义周和月份显示文字
• 优化中英文切换逻辑，默认英文显示更合理

优化

• 优化弹出层交互体验
• 移除调试日志
• 优化代码结构和注释

修复

• 修复弹出层显示状态同步问题
• 修复中英文切换时的显示问题

0.2.51（2025-05-22）

变更

• 优化组件简介

0.2.5（2025-05-22）

新增

• 新增弹出层模式
  • 通过 isPopup 属性控制显示模式
  • 支持显示/隐藏控制
  • 支持自定义标题
  • 支持遮罩层模糊效果
  • 支持自定义主题色
• 新增主题色自动适配功能
• 新增中英文切换功能
• 新增日期范围限制功能
• 新增自定义颜色配置

优化

• 优化颜色处理逻辑，支持主题色自动适配
• 优化样式结构，移除 CSS 中的 v-bind
• 优化默认配置，默认使用中文显示
• 优化弹出层动画效果
• 优化弹出层样式，提升用户体验

变更

• 移除 monthLine 图片选项
• 修改默认颜色配置
• 修改颜色优先级逻辑
• 调整组件文档结构，增加弹出层使用说明

修复

• 修复样式绑定问题
• 修复颜色计算问题
• 修复弹出层遮罩层点击穿透问题

平台兼容性

uni-app

其他

Mods-Calendar

一个功能丰富的日历选择器组件，支持弹出层模式和自定义主题。

功能特点

• 支持弹出层模式
• 支持自定义主题色
• 支持中英文切换
• 支持自定义周和月份显示
• 支持日期范围限制
• 支持自定义标题
• 支持遮罩层模糊效果

安装方式

1. 在插件市场下载插件
2. 将插件导入到项目中

基本用法

默认显示模式

<template>
  <view>
    <Mods-Calendar 
      v-model="selectedDate"
      @selectDate="onDateSelected"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: ''
    }
  },
  methods: {
    onDateSelected(date) {
      this.selectedDate = date.data
    }
  }
}
</script>

弹出层模式

<template>
  <view>
    <button @click="openCalendar">选择日期</button>
    <Mods-Calendar 
      v-model="selectedDate" 
      :show="showCalendar" 
      @update:show="showCalendar = $event"
      :isPopup="true" 
      title="选择日期"
      @selectDate="onDateSelected" 
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      showCalendar: false
    }
  },
  methods: {
    openCalendar() {
      this.showCalendar = true
    },
    onDateSelected(date) {
      this.selectedDate = date.data
      this.showCalendar = false
    }
  }
}
</script>

属性说明

事件说明

版本历史

• v0.3.0
  • 添加确定按钮
  • 优化弹出层交互
  • 支持自定义周和月份显示
  • 优化中英文切换逻辑