# CDatePicker 日期选择组件

## 功能说明

CDatePicker 是一个日期选择组件，用于在表单中选择日期或日期范围。组件支持三种选择模式：日期选择、日期时间选择和日期范围选择。

## 引用方式

```js
import { CDatePicker } from '@components/forms/datePicker';
```

## 组件参数

- `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用
- `mode` (String，可选)：日期时间选择器模式，可选值有 date、dateTime、dateRange，默认为 date
- `placeholder` (String，可选)：输入框占位提示文本
- `limitStart` (String，可选)：可选日期的开始日期，格式为 YYYY-MM-DD
- `limitEnd` (String，可选)：可选日期的结束日期，格式为 YYYY-MM-DD
- `fields` (String，可选)：日期选择粒度，可选值有 year、month、day，默认为 day
- `readOnly` (Boolean，可选)：只读模式，默认为 false
- `allowClear` (Boolean，可选)：是否允许清除已选值，默认为 false

## 使用示例

### 基础用法（日期选择模式）

```html
<template>
  <CForm :form="form">
    <CFormItem name="birthday" label="出生日期">
      <CDatePicker placeholder="请选择出生日期" />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CDatePicker } from '@components/forms/datePicker';

export default {
  components: {
    CForm,
    CFormItem,
    CDatePicker
  },
  data() {
    return {
      form: {
        birthday: ''
      }
    };
  }
};
</script>
```

### 日期时间选择模式

```html
<CFormItem name="meetingTime" label="会议时间">
  <CDatePicker 
    mode="dateTime" 
    placeholder="请选择会议时间" 
  />
</CFormItem>
```

### 日期范围选择模式

```html
<CFormItem name="vacationPeriod" label="休假时间">
  <CDatePicker 
    mode="dateRange" 
    placeholder="请选择休假时间段" 
  />
</CFormItem>
```

### 限制可选日期范围

```html
<CFormItem name="appointmentDate" label="预约日期">
  <CDatePicker 
    limitStart="2023-01-01" 
    limitEnd="2023-12-31" 
    placeholder="请选择预约日期" 
  />
</CFormItem>
```

### 允许清除已选值

```html
<CFormItem name="deadline" label="截止日期">
  <CDatePicker 
    :allowClear="true" 
    placeholder="请选择截止日期" 
  />
</CFormItem>
```

## 注意事项

1. 不同的 `mode` 值对应不同的日期选择交互方式：
   - `date`：选择单个日期，使用系统日期选择器
   - `dateTime`：选择日期和时间，使用自定义的日期时间选择器
   - `dateRange`：选择日期范围，使用自定义的日期范围选择器
2. 当设置 `allowClear` 为 true 时，已选择日期后会显示清除图标，点击可清除已选值
3. `limitStart` 和 `limitEnd` 参数仅在 `mode` 为 date 时生效
4. 组件默认的可选日期范围是当前年份的前后 30 年
5. 在只读模式下，日期选择器将不可操作