Skip to content

Commit 97c4004

Browse files
MoonofweishengMoonofweisheng
authored
feat: ✨ Calendar 优化选中样式和滚动位置处理并支持屏蔽内置cell (#768)
1 parent 995a65f commit 97c4004

20 files changed

Lines changed: 319 additions & 203 deletions

File tree

‎docs/component/calendar-view.md‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -137,14 +137,27 @@ function handleChange({ value }) {
137137

138138
设置 `formatter` 参数，其值为函数类型，接收一个 `object` 参数，返回一个对象，对象的属性保持跟入参的属性一致，其属性如下：
139139

140-
| 属性 | 类型 | 说明 | 最低版本 |
141-
| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
142-
| type | string | 日期类型，'selected' - 单日期选中，'start' - 范围开始日期，'end' - 范围结束日期，'middle' - 范围开始与结束之间的日期，'same' - 范围开始与结束日期同一天 | - |
143-
| date | timestamp | 13 位的时间戳 | - |
144-
| text | string | 日期文本内容 | - |
145-
| topInfo | string | 上方提示信息 | - |
146-
| bottomInfo | string | 下方提示信息 | - |
147-
| disabled | boolean | 是否禁用 | - |
140+
| 属性 | 类型 | 说明 | 最低版本 |
141+
| ---------- | --------------- | ------------------------------------------- | -------- |
142+
| type | CalendarDayType | 可选值见[CalendarDayType](#calendardaytype) | - |
143+
| date | timestamp | 13 位的时间戳 | - |
144+
| text | string | 日期文本内容 | - |
145+
| topInfo | string | 上方提示信息 | - |
146+
| bottomInfo | string | 下方提示信息 | - |
147+
| disabled | boolean | 是否禁用 | - |
148+
149+
### CalendarDayType
150+
151+
| 类型 | 说明 |
152+
| ----------------- | ------------------------------------ |
153+
| selected | 单日期选中 |
154+
| start | 范围开始日期 |
155+
| end | 范围结束日期 |
156+
| middle | 范围开始与结束之间的日期 |
157+
| same | 范围开始与结束日期同一天 |
158+
| current | 当前日期 |
159+
| multiple-middle | 多日期范围选择，开始与结束之间的日期 |
160+
| multiple-selected | 多日期范围选择，选中的日期 |
148161

149162
```html
150163
<wd-calendar-view type="daterange" v-model="value" allow-same-day :formatter="formatter" @change="handleChange"></wd-calendar-view>
@@ -218,23 +231,23 @@ function handleChange({ value }) {
218231

219232
## Attributes
220233

221-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
222-
| ----------------- | ---------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- |
223-
| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - |
224-
| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - |
225-
| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - |
226-
| max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - |
227-
| first-day-of-week | 周起始天 | number | - | 0 | - |
228-
| formatter | 日期格式化函数 | function | - | - | - |
229-
| max-range | type 为范围选择时有效，最大日期范围 | number | - | - | - |
230-
| range-prompt | type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 | string | - | 选择天数不能超过 x 天 | - |
231-
| allow-same-day | type 为范围选择时有效，是否允许选择同一天 | boolean | - | false | - |
232-
| show-panel-title | 是否展示面板标题，自动计算当前滚动的日期月份 | boolean | - | true | - |
233-
| default-time | 选中日期所使用的当日内具体时刻 | string / array | - | 00:00:00 | - |
234-
| panel-height | 可滚动面板的高度 | number | - | 378 | - |
235-
| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - |
236-
| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - |
237-
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
234+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
235+
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------- | --------------------- | -------- |
236+
| v-model | 选中值，为 13 位时间戳或时间戳数组 | null / number / array | - | - | - |
237+
| type | 日期类型 | string | date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange | date | - |
238+
| min-date | 最小日期，为 13 位时间戳 | number | - | 当前日期往前推 6 个月 | - |
239+
| max-date | 最大日期，为 13 位时间戳 | number | - | 当前日期往后推 6 个月 | - |
240+
| first-day-of-week | 周起始天 | number | - | 0 | - |
241+
| formatter | 日期格式化函数 | function | - | - | - |
242+
| max-range | type 为范围选择时有效，最大日期范围 | number | - | - | - |
243+
| range-prompt | type 为范围选择时有效，选择超出最大日期范围时的错误提示文案 | string | - | 选择天数不能超过 x 天 | - |
244+
| allow-same-day | type 为范围选择时有效，是否允许选择同一天 | boolean | - | false | - |
245+
| show-panel-title | 是否展示面板标题，自动计算当前滚动的日期月份 | boolean | - | true | - |
246+
| default-time | 选中日期所使用的当日内具体时刻 | string / array | - | 00:00:00 | - |
247+
| panel-height | 可滚动面板的高度 | number | - | 378 | - |
248+
| time-filter | type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据 | function | - | - | - |
249+
| hide-second | type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改 | boolean | - | false | - |
250+
| immediate-change | type 为 'datetime' 或 'datetimerange' 时有，是否在手指松开时立即触发 picker-view 的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25 版本起提供，仅微信小程序和支付宝小程序支持。 | boolean | - | false | 1.2.25 |
238251

239252
## Events
240253

0 commit comments

Comments
 (0)