更新记录

0.0.1（2025-08-13） 下载此版本

初始提交

平台兼容性

uni-app(4.71)

uni-app x(4.71)

Calendar Date Picker 组件

功能概述

这是一个弹窗式日历日期选择器组件，支持多种交互模式和自定义配置。

主要特性

• 弹窗显示：以模态弹窗形式展示日历
• 年月导航：支持上个月/下个月切换
• 日期选择：点击日期进行选择
• 范围限制：支持设置最小/最大可选日期
• 多种模式：支持带按钮确认和不带按钮自动确认两种模式
• v-model支持：支持双向数据绑定

核心属性

事件

使用示例

<template>
  <view>
    <button @click="showPicker">选择日期</button>

    <DatePicker 
      :visible.sync="visible"
      :show-buttons="true"
      v-model="selectedDate"
      @change="onDateChange"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </view>
</template>

<script>
import DatePicker from '@/components/calendar-date-picker.vue'

export default {
  components: { DatePicker },
  data() {
    return {
      visible: false,
      selectedDate: ''
    }
  },
  methods: {
    showPicker() {
      this.visible = true
    },
    onDateChange(dateInfo) {
      console.log('日期变化：', dateInfo)
    },
    onCancel() {
      console.log('取消选择')
    },
    onConfirm(dateInfo) {
      console.log('确认选择：', dateInfo)
    }
  }
}
</script>

使用场景

适用于需要用户选择日期的各种场景，如：

• 预约系统
• 日程安排
• 生日选择
• 活动日期选择
• 表单日期输入