cxc-szcx-uniapp/uni_modules/cxc-szcx-dateRangeSelect

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

一、组件功能

该组件是基于 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	数据更新时触发	当前选中的日期数组

六、样式说明

<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. 水平排列布局

七、使用示例

<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. 异常处理：

   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. 异常处理机制