cxc-szcx-uniapp/uni_modules/cxc-szcx-dateRangeSelect/readme.md

### 紧凑型日期时间选择器组件说明


#### 一、组件功能
该组件是基于 UniApp 开发的紧凑型日期选择器，支持以下功能：
1. **三种选择模式**：
   - 单选（single）
   - 范围选择（range）
   - 多选（multiple）
2. **弹出式日历选择**：
   - 支持月份滑动切换
   - 显示农历日期
   - 支持同天范围选择
3. **数据双向绑定**：
   - 通过 `modelValue` 实现父子组件数据同步
4. **自定义样式**：
   - 紧凑型输入框设计
   - 支持自定义主题颜色
   - 响应式布局适配


#### 二、组件Props

| 参数名       | 类型       | 默认值   | 说明                     |
|--------------|------------|----------|--------------------------|
| `modelValue` | Array/Date | `[null]` | 双向绑定的值（根据模式变化） |
| `mode`       | String     | `single` | 选择模式（single/range/multiple） |


#### 三、组件数据

| 名称       | 类型   | 说明                     |
|------------|--------|--------------------------|
| `dateRange` | Array  | 当前选中的日期范围（内部状态） |


#### 四、组件方法

| 方法名         | 参数       | 说明                     |
|----------------|------------|--------------------------|
| `openPicker`   | 无         | 打开日历选择器           |
| `calendarConfirm` | `e`      | 日历确认回调（处理选中数据） |


#### 五、事件说明

| 事件名       | 说明                     | 返回值               |
|--------------|--------------------------|----------------------|
| `update:modelValue` | 数据更新时触发           | 当前选中的日期数组   |


#### 六、样式说明
```vue
<style scoped>
.input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.compact-input {
  flex: 1;
  padding: 6px 8px;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  width: 120px;
}

.compact-input.active {
  border-color: #409eff;
  background-color: #f5f7ff;
}
</style>
```

**关键样式点**：
1. 输入框宽度固定为 120px
2. 紧凑型设计（height: 20px）
3. 活动状态样式增强
4. 水平排列布局


#### 七、使用示例
```vue
<template>
  <view>
    <!-- 单选模式 -->
    <compact-datetime-picker
      v-model="singleDate"
      mode="single"
    />

    <!-- 范围选择模式 -->
    <compact-datetime-picker
      v-model="rangeDate"
      mode="range"
    />

    <!-- 多选模式 -->
    <compact-datetime-picker
      v-model="multipleDate"
      mode="multiple"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      singleDate: null,
      rangeDate: [null, null],
      multipleDate: []
    };
  }
};
</script>
```


#### 八、注意事项
1. **日期格式要求**：
   - 单选模式：`YYYY-MM-DD` 字符串格式
   - 范围模式：`[startDate, endDate]` 数组格式
   - 多选模式：`[date1, date2, ...]` 数组格式
2. **依赖组件**：
   - 需安装 `wu-calendar` 组件（第三方库）
3. **异常处理**：
   ```javascript
   calendarConfirm(e) {
     this.dateRange = [];
     try {
       this.dateRange.push(formatDate(new Date(e.range.before)));
       this.dateRange.push(formatDate(new Date(e.range.after)));
     } catch (error) {
       return; // 异常处理
     }
     this.$emit('update:modelValue', this.dateRange);
   }
   ```
4. **性能优化**：
   - 建议使用 `:range-end-repick="true"` 开启范围重新选择
   - 通过 `:item-height="45"` 控制日历行高


#### 九、扩展功能建议
1. 添加时间选择功能
2. 支持自定义日期禁用范围
3. 增加国际化支持
4. 添加动画过渡效果
5. 支持预设常用日期范围

如果需要进一步定制化，可以修改以下部分：
1. 日历组件配置（`wu-calendar` 参数）
2. 日期格式化函数（`formatDate`）
3. 输入框样式和交互逻辑
4. 异常处理机制