更新记录

1.0.0（2025-07-02） 下载此版本

版本发布

平台兼容性

uni-app(4.05)

uni-app x(4.05)

vshare-date-picker 组件使用文档

组件简介

vshare-date-picker 是一个现代化的日期选择器组件，支持周/月视图切换、滑动切换周/月、选中高亮、回到今天等功能，适用于移动端和 PC 端的 Vue 项目。

属性（Props）

事件（Events）

用法示例

<template>
  <vshare-date-picker v-model="selectedDate" @change="onDateChange" />
</template>

<script>
import vshareDatePicker from '@/components/vshare-date-picker/vshare-date-picker.vue';
export default {
  components: { vshareDatePicker },
  data() {
    return {
      selectedDate: { year: 2024, month: 6, day: 1 },
    };
  },
  methods: {
    onDateChange(date) {
      console.log('选中日期:', date);
    },
  },
};
</script>

主要特性

• 支持周/月视图切换，点击箭头可切换
• 周视图/滑动切换周，月视图/滑动切换月
• 月视图切换后自动选中1号
• 选中高亮，今天高亮，禁用日期灰显
• 仅当选中日期不是今天时显示"回到今天"按钮
• 选中日期格式统一为 { year, month, day }

常见问题与注意事项

1. v-model 绑定格式：推荐使用 { year, month, day } 对象，兼容 Date 类型。
2. 事件参数：所有 input/change 事件参数均为 { year, month, day }。
3. 滑动切换：周/月视图均可左右滑动切换，月视图切换后自动选中1号。
4. 自定义样式：可通过覆盖 .mdp- 前缀的类名自定义样式。
5. 不支持时间选择：仅支持日期，不支持时分秒。