更新记录

1.0.0（2025-05-13） 下载此版本

初版

平台兼容性

Picker-Date-Range 时间选择器组件

Picker-Date-Range是一个日期范围选择器组件，用于选择开始日期和结束日期范围。

功能特点

• 支持日期范围选择（开始日期-结束日期）
• 支持设置默认日期
• 支持最小/最大日期限制
• 平滑的动画过渡效果
• 自动防止结束日期早于开始日期

属性说明

事件

方法

基本用法

<template>
  <view>
    <view @click="openDatePicker">
      <text>选择日期: {{ dateRangeText }}</text>
    </view>

    <PickerDateRange
      ref="datePickerRef"
      :startDateInit="startDate"
      :endDateInit="endDate"
      @confirm="onDateConfirm"
    >
      <view>点击此处打开日期选择器</view>
    </PickerDateRange>
  </view>
</template>

<script setup>
import { ref, computed } from "vue"
import PickerDateRange from "@/components/Picker-Date-Range/index.vue"

const datePickerRef = ref(null)
const startDate = ref("")
const endDate = ref("")

// 格式化显示日期范围
const dateRangeText = computed(() => {
  if (startDate.value && endDate.value) {
    return `${startDate.value} 至 ${endDate.value}`
  }
  return "请选择日期范围"
})

// 打开日期选择器
const openDatePicker = () => {
  // 可以传入默认日期，不传则使用当天日期
  datePickerRef.value.showPicker()
}

// 日期确认回调
const onDateConfirm = (dates) => {
  startDate.value = dates.startDate
  endDate.value = dates.endDate

  // 这里可以进行其他操作，如数据请求等
  console.log("选择的日期范围:", dates)
}
</script>

重置日期示例

<template>
  <view>
    <view class="flex items-center">
      <view @click="openDatePicker">选择日期: {{ dateRangeText }}</view>
      <view @click="resetDate" v-if="startDate && endDate">重置</view>
    </view>

    <PickerDateRange
      ref="datePickerRef"
      :startDateInit="startDate"
      :endDateInit="endDate"
      @confirm="onDateConfirm"
    />
  </view>
</template>

<script setup>
import { ref, computed } from "vue"
import PickerDateRange from "@/components/Picker-Date-Range/index.vue"

const datePickerRef = ref(null)
const startDate = ref("")
const endDate = ref("")

const dateRangeText = computed(() => {
  if (startDate.value && endDate.value) {
    return `${startDate.value}-${endDate.value}`
  }
  return "选择日期"
})

const openDatePicker = () => {
  datePickerRef.value.showPicker()
}

const onDateConfirm = (dates) => {
  startDate.value = dates.startDate
  endDate.value = dates.endDate
}

const resetDate = () => {
  // 重置日期范围
  startDate.value = ""
  endDate.value = ""
}
</script>

注意事项

1. 使用前需要通过ref获取组件实例才能调用showPicker方法
2. 日期格式统一为'YYYY-MM-DD'
3. 重置日期后，再次打开选择器将显示当天日期
4. 组件内部会自动处理日期范围的合法性，确保结束日期不早于开始日期