@tanzhenxing/zx-calendar v1.0.2

zx-calendar 日历组件

一个功能完善的uni-app日历组件，支持公历、农历显示，日期范围选择，自定义日期信息等功能。

功能特点

• 支持插入模式和弹出模式
• 支持公历和农历显示
• 支持日期范围选择
• 支持自定义日期附加信息
• 支持国际化（中文简体、中文繁体、英文）
• 支持月份背景显示
• 支持今日快速跳转

安装使用

将 zx-calendar 文件夹复制到项目的 components 目录下即可使用。

基本用法

引入组件

<script setup>
import ZxCalendar from '@/components/zx-calendar/zx-calendar.vue';
</script>

插入模式

<template>
  <view class="content">
    <zx-calendar
      :insert="true"
      :lunar="true"
      @change="change"
    />
  </view>
</template>

<script setup>
const change = (e) => {
  console.log('选择日期：', e.fulldate);
};
</script>

弹出模式

<template>
  <view class="content">
    <button @click="openCalendar">打开日历</button>
    <zx-calendar
      ref="calendar"
      :insert="false"
      :clearDate="true"
      @confirm="confirm"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const calendar = ref(null);
const openCalendar = () => {
  calendar.value.open();
};

const confirm = (e) => {
  console.log('确认选择：', e.fulldate);
};
</script>

日期范围选择

<template>
  <view class="content">
    <zx-calendar
      :insert="true"
      :range="true"
      :start-date="'2023-01-01'"
      :end-date="'2023-12-31'"
      @change="rangeChange"
    />
  </view>
</template>

<script setup>
const rangeChange = (e) => {
  console.log('选择日期范围：', e.range);
};
</script>

自定义日期信息

<template>
  <view class="content">
    <zx-calendar
      :insert="true"
      :selected="selected"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue';

const selected = ref([
  {
    date: '2023-10-20',
    info: '会议'
  },
  {
    date: '2023-10-21',
    info: '出差'
  }
]);
</script>

组件属性

事件说明

方法说明

国际化支持

组件默认支持简体中文、繁体中文和英文，可通过uni-app提供的国际化功能自动切换语言。

样式定制

可通过修改组件中的样式变量来定制日历风格：

$zx-primary: #2979ff; // 主题色
$zx-text-color: #333; // 文本颜色
$zx-border-color: #EDEDED; // 边框颜色
$zx-bg-color-hover: #f1f1f1; // 悬浮背景色
$zx-color-error: #e43d33; // 错误色/强调色
$zx-text-color-grey: #999; // 灰色文本

注意事项

1. 日期格式统一使用 'YYYY-MM-DD'
2. 选择范围时，请同时设置 startDate 和 endDate
3. 弹出模式下，需通过 ref 调用 open() 方法打开日历