feat(date-picker): 添加 date slot 支持自定义日期单元格内容#7382
feat(date-picker): 添加 date slot 支持自定义日期单元格内容#7382LouisLau-art wants to merge 4 commits intotusen-ai:mainfrom
Conversation
- Add date slot to DatePickerSlots interface with year, month, date parameters - Support date slot in date, datetime, daterange, datetimerange panels - Add DatePickerDateSlotProps to public-types - Add demo files for both English and Chinese - Update documentation with slot description Closes tusen-ai#6751
src/date-picker/src/DatePicker.tsx
Outdated
|
|
||
| export type DatePickerSetupProps = ExtractPropTypes<typeof datePickerProps> | ||
|
|
||
| export interface DatePickerDateSlotProps { |
There was a problem hiding this comment.
和 src/date-picker/src/public-types.ts 里的重复定义了
src/date-picker/src/panel/date.tsx
Outdated
| > | ||
| <div class={`${mergedClsPrefix}-date-panel-date__trigger`} /> | ||
| {dateItem.dateObject.date} | ||
| {datePickerSlots.date |
There was a problem hiding this comment.
这几段逻辑完全一致 你可以抽一个 renderDate 的 util 复用
| | prev-month | `()` | 日期面板的 `上一个` 图标 | 2.33.4 | | ||
| | prev-year | `()` | 日期面板的 `快速上一个` 图标 | 2.33.4 | | ||
| | separator | `()` | 日期范围分隔符号 | 2.29.0 | | ||
| | 名称 | 参数 | 说明 | 版本 | |
There was a problem hiding this comment.
| Use the `date` slot to customize the content of date cells, such as adding lunar calendar dates or holidays. | ||
| </markdown> | ||
|
|
||
| <script lang="ts"> |
There was a problem hiding this comment.
新写的 demo 没有特殊原因的话都用 script setup 语法吧
|
@Sepush 谢谢 review，收到：
|
|
@Sepush 感谢 review！我按你提的点做了跟进：
麻烦你再看下是否符合预期～ |
| 使用 `date` 插槽可以自定义日期单元格的内容，例如添加农历、节日等信息。 | ||
| </markdown> | ||
|
|
||
| <script lang="ts"> |
|
这个功能很需要， 现在日历上一个月与下个月的日期颜色和禁用颜色是一样的，会造成上个月，下个月日期也是禁用的错觉。如果能给日期自定义问题可以稍微避免这样的误会 |
|
感谢反馈，这个问题很有价值。我会接手把这个场景也纳入这次 PR：区分上/下月日期与禁用日期的视觉表现，避免“非当月看起来像禁用”的误解。处理完我会在这里同步截图/说明。 |
|
请问这个PR有进展吗，有同样的自定义日期单元格需求 |
|
感谢关注，这个 PR 目前在等待 maintainer review。 |
|
@LouisLau-art 我把 |
|
收到，感谢你帮忙补了 我这边可以跟进合并到当前 PR，但请你把你那个 PR / 分支链接贴一下（或直接告诉我 fork 仓库名 + 分支名）。 |
|
我之前在你的仓库提交了 PR LouisLau-art#3，按理说你合并之后就会自动同步到现在这个 PR 上的， |
|
已跟进修复当前 CI 的 修复内容（对应 lint 日志）：
本地验证：
可以触发新一轮 CI 了，辛苦再看下。 |
4 participants
功能描述
为 DatePicker 组件添加 `date` 插槽，允许用户自定义日期单元格的内容，例如添加农历、节日等信息。
关联 Issue
Closes #6751
修改内容
用法示例
```vue
<template #date="{ year, month, date }">
{{ date }}
{{ getLunarDate(year, month, date) }}
```