更新记录

1.2.0（2025-07-03） 下载此版本

新增

• 点击"回到今天"按钮时，支持滑动动画效果，提升用户体验。
  • 通过 goTodayWithAnimation 标记和 swiperIndex/monthSwiperIndex 切换实现。

优化

• 月视图补齐逻辑调整：
  • 计算每月天数时，补齐到 35 或 42 天，保证日历显示完整周。
  • 移除冗余的调试输出和注释。

1.1.1（2025-07-03） 下载此版本

修复 月视图 展示错乱问题

1.1.0（2025-07-03） 下载此版本

主要改进

1. 月视图滑动切换

• 新增 monthSwiperIndex 数据属性
• 新增 onMonthSwiperChange 方法处理月视图滑动
• 新增 onMonthAnimationfinish 方法处理动画完成

2. 自动选中1号

• 月视图切换时自动设置日期为1号
• 保持选中状态的一致性

3. 事件处理优化

• 月视图滑动时正确触发 input 和 change 事件
• 传递正确的日期对象格式

平台兼容性

uni-app(4.05)

uni-app x(4.05)

vshare-date-picker-enhanced 增强版日期选择器组件

组件简介

vshare-date-picker-enhanced 是基于原版 vshare-date-picker 的增强版本，新增了月视图滑动切换功能。当切换到月视图时，可以通过左右滑动来切换月份，并且默认选中1号。

新增功能

🆕 月视图滑动切换

• 左右滑动切换月份：在月视图模式下，可以左右滑动切换上个月/下个月
• 自动选中1号：每次切换月份后，自动选中该月的1号
• 流畅动画：保持原有的滑动动画效果

属性（Props）

事件（Events）

使用方法

<template>
  <view>
    <vshareDatePickerEnhanced
      v-model="selectedDate"
      @change="onDateChange"
    />
  </view>
</template>

<script>
import vshareDatePickerEnhanced from '@/components/vshare-date-picker/vshare-date-picker-enhanced.vue'

export default {
  components: {
    vshareDatePickerEnhanced
  },
  data() {
    return {
      selectedDate: { year: 2024, month: 6, day: 1 }
    }
  },
  methods: {
    onDateChange(date) {
      console.log('选中日期:', date)
      // 处理日期变化
    }
  }
}
</script>

功能对比

主要改进

1. 月视图滑动切换

• 新增 monthSwiperIndex 数据属性
• 新增 onMonthSwiperChange 方法处理月视图滑动
• 新增 onMonthAnimationfinish 方法处理动画完成

2. 自动选中1号

• 月视图切换时自动设置日期为1号
• 保持选中状态的一致性

3. 事件处理优化

• 月视图滑动时正确触发 input 和 change 事件
• 传递正确的日期对象格式

注意事项

1. 兼容性：增强版组件完全兼容原版组件的所有功能
2. 性能：月视图滑动切换经过优化，动画流畅
3. 数据格式：所有事件返回的日期格式均为 {year, month, day} 对象
4. 样式：保持与原版组件相同的样式设计

升级建议

如果你的项目正在使用原版 vshare-date-picker，可以无缝升级到增强版：

1. 将导入路径改为 vshare-date-picker-enhanced.vue
2. 组件名称改为 vshareDatePickerEnhanced
3. 其他使用方式保持不变

更新说明

新增

• 点击"回到今天"按钮时，支持滑动动画效果，提升用户体验。
  • 通过 goTodayWithAnimation 标记和 swiperIndex/monthSwiperIndex 切换实现。

优化

• 月视图补齐逻辑调整：
  • 计算每月天数时，补齐到 35 或 42 天，保证日历显示完整周。
  • 移除冗余的调试输出和注释。

如需更多历史变更记录，请补充。

// 原版
import vshareDatePicker from '@/components/vshare-date-picker/vshare-date-picker.vue'

// 增强版
import vshareDatePickerEnhanced from '@/components/vshare-date-picker/vshare-date-picker-enhanced.vue'