# client-h5

**Repository Path**: fndome/client-h5

## Basic Information

- **Project Name**: client-h5
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-28
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 日期选择组件 (Date Select Component)

一个功能强大的Vue 3日期时间选择组件，支持单时间选择和时间范围选择，并且可以控制可选择的时间范围。

## 功能特性

- ✅ 单时间选择模式和时间范围选择模式
- ✅ 可自定义显示的时间单位（年、月、日、时、分）
- ✅ 支持设置最小和最大可选日期
- ✅ 自动过滤不可选择的日期，用户看不到范围外的日期
- ✅ 响应式设计，支持不同屏幕尺寸
- ✅ 完整的类型检查和错误处理

## 使用方法

### 基础用法

```vue
<template>
  <date-select 
    @update:dateRange="handleDateChange"
    @update:yearRange="handleYearChange"
  />
</template>

<script setup>
import DateSelect from '@/components/date-select/index.vue'

const handleDateChange = (dateRange) => {
  console.log('选择的日期范围:', dateRange)
}

const handleYearChange = (yearRange) => {
  console.log('时间戳范围:', yearRange)
}
</script>
```

### 限制日期范围

```vue
<template>
  <date-select 
    :min-date="minDate"
    :max-date="maxDate"
    @update:dateRange="handleDateChange"
  />
</template>

<script setup>
import DateSelect from '@/components/date-select/index.vue'

// 设置最小日期为2025年5月1日
const minDate = new Date('2025-05-01')

// 设置最大日期为2025年12月31日
const maxDate = new Date('2025-12-31')

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

### 单时间选择模式

```vue
<template>
  <date-select 
    :single-mode="true"
    :units="['year', 'month', 'day']"
    :min-date="'2025-01-01'"
    @update:dateRange="handleDateChange"
  />
</template>
```

### 自定义时间单位

```vue
<template>
  <!-- 只显示年月 -->
  <date-select 
    :units="['year', 'month']"
    :show-year="true"
    @update:dateRange="handleDateChange"
  />
  
  <!-- 只显示时分 -->
  <date-select 
    :units="['hour', 'minute']"
    @update:dateRange="handleDateChange"
  />
</template>
```

## Props 属性

| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `isDisabled` | Boolean | `false` | 是否禁用组件 |
| `showYear` | Boolean | `false` | 是否在格式化结果中显示年份 |
| `singleMode` | Boolean | `false` | 是否为单时间选择模式 |
| `units` | Array | `['month', 'day', 'hour', 'minute']` | 要显示的时间单位 |
| `minDate` | Date/Number/String | `null` | 最小可选日期 |
| `maxDate` | Date/Number/String | `null` | 最大可选日期 |

## Events 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| `update:dateRange` | `(dateRange: string)` | 格式化的日期范围字符串 |
| `update:yearRange` | `(yearRange: string)` | 时间戳格式的日期范围 |

## 日期范围控制示例

### 示例1：只能选择2025年5月1日之后的日期

```vue
<template>
  <date-select 
    :min-date="new Date('2025-05-01')"
    @update:dateRange="handleDateChange"
  />
</template>
```

### 示例2：只能选择当前年份的日期

```vue
<template>
  <date-select 
    :min-date="new Date(new Date().getFullYear(), 0, 1)"
    :max-date="new Date(new Date().getFullYear(), 11, 31)"
    @update:dateRange="handleDateChange"
  />
</template>
```

### 示例3：使用时间戳设置范围

```vue
<template>
  <date-select 
    :min-date="1735689600000"
    :max-date="1767225600000"
    @update:dateRange="handleDateChange"
  />
</template>
```

## 注意事项

1. 当设置了 `minDate` 或 `maxDate` 时，用户将无法看到范围外的日期选项
2. 如果当前时间不在允许范围内，组件会自动选择最接近的有效日期
3. 在范围选择模式下，如果结束时间早于开始时间，会自动调整结束时间
4. 支持多种日期格式：Date对象、时间戳（毫秒）、日期字符串

## 样式自定义

组件使用了SCSS变量，可以通过修改 `@/styles/variables.scss` 和 `@/styles/font-size.scss` 来自定义样式。