139 lines
6.2 KiB
Markdown
139 lines
6.2 KiB
Markdown
# cxc-szcx-dateRangeSelect
|
||
# # 紧凑型日期时间选择器组件说明书
|
||
|
||
## 一、组件概述
|
||
`compact-datetime-picker` 是一个基于 Vue 开发的紧凑型日期时间选择器组件，用于在页面中选择日期范围。组件提供了自然周期和相对周期两种选择模式，并且支持快捷选择本周、本月、本季、本年、近一周、近一月、近一季、近一年等常见时间范围。
|
||
|
||
## 二、组件依赖
|
||
- **Vue**：组件基于 Vue 框架开发。
|
||
- **uni-popup**：来自 `uni-app` 的弹窗组件，用于显示日期选择器的弹出层。
|
||
|
||
## 三、组件使用方法
|
||
|
||
### 1. 引入组件
|
||
在需要使用该组件的 Vue 文件中，引入 `compact-datetime-picker` 组件。
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<compact-datetime-picker v-model="dateRange" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CompactDateTimePicker from '@/components/compact-datetime-picker.vue';
|
||
|
||
export default {
|
||
components: {
|
||
CompactDateTimePicker
|
||
},
|
||
data() {
|
||
return {
|
||
dateRange: [null, null]
|
||
};
|
||
}
|
||
};
|
||
</script>
|
||
```
|
||
|
||
### 2. 组件属性
|
||
| 属性名 | 类型 | 默认值 | 描述 |
|
||
| ---- | ---- | ---- | ---- |
|
||
| `modelValue` | `Array` | `[null, null]` | 双向绑定的日期范围数组，第一个元素为开始日期，第二个元素为结束日期。 |
|
||
|
||
## 四、组件内部实现
|
||
|
||
### 1. 模板部分
|
||
- **输入框区域**：显示开始日期和结束日期的输入框，点击输入框可打开日期选择弹窗。
|
||
- **日期选择弹窗**：
|
||
- **快捷按钮区域**：包含自然周期和相对周期的切换按钮，以及不同模式下的快捷操作按钮。
|
||
- **日历选择区域**：显示当前月份的日历，可选择日期。
|
||
- **操作按钮**：包含取消和确定按钮，用于关闭弹窗和确认选择的日期范围。
|
||
|
||
### 2. 脚本部分
|
||
|
||
#### 2.1 数据属性
|
||
```javascript
|
||
data() {
|
||
return {
|
||
isNatural: true, // 是否为自然周期模式
|
||
activeType: 'start', // 当前活跃的日期选择类型（开始或结束）
|
||
currentMonth: new Date(), // 当前显示的月份
|
||
tempStart: null, // 临时开始日期
|
||
tempEnd: null, // 临时结束日期
|
||
weekDays: ['日', '一', '二', '三', '四', '五', '六'], // 星期几的显示文本
|
||
quickButtonszr: [
|
||
{ label: '本周', type: 'week' },
|
||
{ label: '本月', type: 'month' },
|
||
{ label: '本季', type: 'quarter' },
|
||
{ label: '本年', type: 'year' }
|
||
], // 自然周期模式下的快捷按钮
|
||
quickButtonsxd: [
|
||
{ label: '近一周', type: 'week' },
|
||
{ label: '近一月', type: 'month' },
|
||
{ label: '近一季', type: 'quarter' },
|
||
{ label: '近一年', type: 'year' }
|
||
] // 相对周期模式下的快捷按钮
|
||
};
|
||
}
|
||
```
|
||
|
||
#### 2.2 计算属性
|
||
- `formattedStart`：格式化后的开始日期。
|
||
- `formattedEnd`：格式化后的结束日期。
|
||
- `calendarDays`：生成当前月份的日历数据。
|
||
- `monthText`：当前月份的显示文本。
|
||
|
||
#### 2.3 监听属性
|
||
```javascript
|
||
watch: {
|
||
modelValue: {
|
||
immediate: true,
|
||
handler(newVal) {
|
||
this.tempStart = newVal[0];
|
||
this.tempEnd = newVal[1];
|
||
}
|
||
}
|
||
}
|
||
```
|
||
监听 `modelValue` 的变化，初始化临时日期。
|
||
|
||
#### 2.4 方法
|
||
- **打开弹窗并初始化临时值**：`openPicker(type)`，打开日期选择弹窗，并根据活跃类型初始化临时日期。
|
||
- **日期点击处理**：`handleDayClick(day)`，处理日期点击事件，更新临时开始或结束日期。
|
||
- **确认选择**：`confirmSelection()`，确认选择的日期范围，触发 `update:modelValue` 事件并关闭弹窗。
|
||
- **关闭弹窗**：`closePicker()`，关闭日期选择弹窗，并重置临时日期。
|
||
- **重置临时日期**：`resetTempDates()`，将临时日期重置为当前的 `modelValue`。
|
||
- **生成日历数据**：`generateCalendar(date)`，根据给定的月份生成日历数据。
|
||
- **日期选择处理**：`selectDate(date)`，处理日期选择，更新 `modelValue`。
|
||
- **切换月份**：`changeMonth(offset)`，切换当前显示的月份。
|
||
- **判断日期状态**：
|
||
- `isSelected(date)`：判断日期是否被选中。
|
||
- `isEnd(date)`：判断日期是否为结束日期。
|
||
- `isToday(date)`：判断日期是否为今天。
|
||
- `isStart(date)`：判断日期是否为开始日期。
|
||
- `isInRange(date)`：判断日期是否在选择的范围内。
|
||
- `isSameDay(d1, d2)`：判断两个日期是否为同一天。
|
||
- **快捷范围设置**：`setQuickRange(type)`，根据快捷按钮的类型设置日期范围，并关闭弹窗。
|
||
- **自然周期计算**：`calcNaturalRange(type, currentDate)`，计算自然周期模式下的日期范围。
|
||
- **相对周期计算**：`calcRelativeRange(type, currentDate)`，计算相对周期模式下的日期范围。
|
||
- **周计算（周一为起点）**：
|
||
- `getWeekStart(date)`：获取一周的开始日期。
|
||
- `getWeekEnd(startDate)`：获取一周的结束日期。
|
||
- **月末处理**：`lastDayOfMonth(date)`，获取给定月份的最后一天。
|
||
- **月末日调整**：`adjustMonthEnd(start, end)`，调整开始日期到合适的月末日期。
|
||
- **闰年判断**：`isLeapYear(year)`，判断给定年份是否为闰年。
|
||
- **模式切换**：`toggleMode(isNatural)`，切换自然周期和相对周期模式。
|
||
- **日期格式化**：`formatDate(date)`，将日期格式化为 `YYYY-MM-DD` 的字符串。
|
||
|
||
### 3. 样式部分
|
||
- **输入框区域**：设置输入框的样式，包括边框、背景色、字体大小等。
|
||
- **紧凑弹窗**：设置弹窗的整体样式，包括背景色、边框半径等。
|
||
- **紧凑头部**：设置月份标题和导航箭头的样式。
|
||
- **紧凑日期网格**：设置星期几和日期的显示样式，以及不同状态下的日期背景色和字体颜色。
|
||
- **快捷按钮区域**：设置模式切换按钮和快捷操作按钮的样式。
|
||
- **底部操作**：设置取消和确定按钮的样式。
|
||
|
||
## 五、注意事项
|
||
- 组件使用了 `uni-popup` 组件，确保项目中已正确引入和配置。
|
||
- 日期范围的选择逻辑较为复杂，特别是在自然周期和相对周期的切换以及快捷范围设置时，需注意日期的计算和显示。
|
||
- 组件的样式是基于 `scoped` 作用域的，可根据项目需求进行调整和扩展。 |