更新记录

1.0.0（2025-10-29） 下载此版本

1.0.0

平台兼容性

日期时间选择器组件

这是一个简洁的日期时间选择器组件库，包含日期选择、日期范围选择和日期时间选择功能。

组件列表

• DateRangePicker - 日期选择器（支持单选和范围选择）
• DateTimePicker - 日期时间选择器

使用方法

1. 日期选择器（单选模式）

<template>
  <DateRangePicker
    mode="single"
    v-model="selectedDate"
    placeholder="选择日期"
    :disabled-date="disabledDate"
    @change="handleDateChange"
  />
</template>

<script setup>
import { DateRangePicker } from '@/components/date-picker'

const selectedDate = ref('2024-01-01')

// 禁用今日之后的日期
const disabledDate = (time) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return time.getTime() >= today.getTime()
}

const handleDateChange = (date) => {
  console.log('选择的日期:', date)
}
</script>

2. 日期范围选择器

<template>
  <DateRangePicker
    mode="range"
    :start-date="startDate"
    :end-date="endDate"
    placeholder="选择时间范围"
    :disabled-date="disabledDate"
    @change="handleDateRangeChange"
  />
</template>

<script setup>
import { DateRangePicker } from '@/components/date-picker'

const startDate = ref('2024-01-01')
const endDate = ref('2024-01-31')

const handleDateRangeChange = (range) => {
  console.log('选择的日期范围:', range)
  // range 格式: ['2024-01-01 00:00:00', '2024-01-31 23:59:59']
}
</script>

3. 日期时间选择器

<template>
  <DateTimePicker
    v-model="selectedDateTime"
    placeholder="选择日期时间"
    :disabled-date="disabledDate"
    @change="handleDateTimeChange"
  />
</template>

<script setup>
import { DateTimePicker } from '@/components/date-picker'

const selectedDateTime = ref('2024-01-01 09:00')

const handleDateTimeChange = (dateTime) => {
  console.log('选择的日期时间:', dateTime)
}
</script>

Props 说明

DateRangePicker

DateTimePicker

Events 说明

禁用日期功能

所有组件都支持 disabledDate 属性，用于禁用特定日期：

// 禁用今日及今日之后的日期
const disabledDate = (time) => {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  return time.getTime() >= today.getTime()
}

// 禁用周末
const disabledWeekend = (time) => {
  const day = time.getDay()
  return day === 0 || day === 6
}

// 禁用特定日期
const disabledSpecificDates = (time) => {
  const disabledDates = ['2024-01-01', '2024-12-25']
  const dateStr = time.toISOString().split('T')[0]
  return disabledDates.includes(dateStr)
}

样式自定义

组件使用 SCSS 编写，支持样式自定义。主要样式类：

• .date-picker-wrapper - 输入框容器
• .date-picker-text - 文本区域
• .expand-icon - 展开图标
• .calendar-day - 日历日期
• .selected - 选中状态
• .disabled - 禁用状态
• .in-range - 范围选择状态

注意事项

1. 组件依赖 bottom-popup.vue 和 pure-picker-Date.vue 组件
2. 日期格式统一使用 YYYY-MM-DD 格式
3. 时间格式统一使用 HH:mm 格式
4. 日期时间格式统一使用 YYYY-MM-DD HH:mm 格式
5. 日期范围选择器返回的格式为 ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59']