101 lines
2.8 KiB
Markdown
101 lines
2.8 KiB
Markdown
# jia-weekPicker 周选择器组件
|
||
|
||
一个用于选择指定年月中某一周的 uni-app 组件。支持设置可选日期范围、自定义主题色等功能。
|
||
|
||
## 特性
|
||
|
||
- 按周选择日期
|
||
- 支持自定义可选日期范围
|
||
- 自定义主题色
|
||
- 流畅的切换动画
|
||
- 周一作为每周的第一天
|
||
- 支持自定义标题和按钮文本
|
||
|
||
## 安装方法
|
||
|
||
在 uni-app 插件市场中搜索 `jia-weekPicker` 并导入到项目中。
|
||
|
||
## 基础用法
|
||
|
||
```vue
|
||
<template>
|
||
<view>
|
||
<button @click="openPicker">打开周选择器</button>
|
||
<jia-weekPicker
|
||
ref="weekPicker"
|
||
:value="selectedDate"
|
||
@change="handleWeekChange"
|
||
/>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectedDate: "2024-03-18", // 默认选中日期
|
||
};
|
||
},
|
||
methods: {
|
||
openPicker() {
|
||
this.$refs.weekPicker.open();
|
||
},
|
||
handleWeekChange(week) {
|
||
console.log("选中的周:", week);
|
||
// week 结构如下：
|
||
// {
|
||
// startDate: '2024-03-18', // 周开始日期
|
||
// endDate: '2024-03-24', // 周结束日期
|
||
// timestamp: 1711209600000, // 结束日期的时间戳
|
||
// weekNumber: 3 // 当月第几周
|
||
// }
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
```
|
||
|
||
## API
|
||
|
||
### Props
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| ----------- | ------ | ----------------- | ----------------------------------- |
|
||
| value | String | 当前日期 | 选中周的初始值，格式为 'YYYY-MM-DD' |
|
||
| minDate | String | 当前日期前 6 个月 | 可选的最小日期，格式为 'YYYY-MM-DD' |
|
||
| maxDate | String | 当前日期 | 可选的最大日期，格式为 'YYYY-MM-DD' |
|
||
| themeColor | String | '#14af6f' | 主题颜色 |
|
||
| title | String | '请选择周期' | 选择器标题 |
|
||
| confirmText | String | '确定' | 确认按钮文本 |
|
||
| cancelText | String | '取消' | 取消按钮文本 |
|
||
|
||
### Events
|
||
|
||
| 事件名 | 说明 | 回调参数 |
|
||
| ------ | -------------- | --------------------------------------------------- |
|
||
| change | 选择周期后触发 | week: { startDate, endDate, timestamp, weekNumber } |
|
||
|
||
### Methods
|
||
|
||
| 方法名 | 说明 | 参数 |
|
||
| ------ | ------------ | ---- |
|
||
| open | 打开周选择器 | - |
|
||
|
||
### week 对象结构
|
||
|
||
```
|
||
|
||
startDate: String, // 周开始日期，格式：YYYY-MM-DD
|
||
endDate: String, // 周结束日期，格式：YYYY-MM-DD
|
||
timestamp: Number, // 结束日期的时间戳
|
||
weekNumber: Number // 当月第几周
|
||
|
||
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. 日期格式必须为 'YYYY-MM-DD'
|
||
2. minDate 不能大于 maxDate
|
||
3. 每周默认以周一为开始日
|
||
4. 组件需要通过 ref 调用 open 方法来显示
|