feat(date-picker): add date cell slot to customize the content of date cell#7514
feat(date-picker): add date cell slot to customize the content of date cell#7514Gahotx wants to merge 9 commits intotusen-ai:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a new date-cell slot to NDatePicker so consumers can customize the rendered content inside each date cell, and includes updated demos/docs showcasing the feature.
Changes:
- Introduces
DatePickerDateCellSlotPropsand a sharedrenderDateCellhelper. - Wires the
date-cellslot into date-related panels (date,datetime,daterange,datetimerange). - Adds new CN/EN demos and updates demo entry documentation to list the new slot.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/date-picker/src/public-types.ts | Adds public slot-props type for date-cell. |
| src/date-picker/src/panel/render-date-cell.ts | New helper to render slot content with fallback to date number. |
| src/date-picker/src/panel/date.tsx | Uses renderDateCell to render each day cell. |
| src/date-picker/src/panel/datetime.tsx | Uses renderDateCell for day cells in datetime panel. |
| src/date-picker/src/panel/daterange.tsx | Uses renderDateCell for start/end range calendars. |
| src/date-picker/src/panel/datetimerange.tsx | Uses renderDateCell for start/end range calendars with time. |
| src/date-picker/src/DatePicker.tsx | Extends DatePickerSlots with the new date-cell slot typing. |
| src/date-picker/demos/zhCN/index.demo-entry.md | Registers new demo and documents date-cell slot. |
| src/date-picker/demos/enUS/index.demo-entry.md | Registers new demo and documents date-cell slot. |
| src/date-picker/demos/zhCN/date-cell-slot.demo.vue | New CN demo showcasing date-cell usage and styling. |
| src/date-picker/demos/enUS/date-cell-slot.demo.vue | New EN demo showcasing date-cell usage and styling. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| export interface DatePickerDateCellSlotProps { | ||
| year: number |
There was a problem hiding this comment.
DatePickerDateCellSlotProps.month is derived from date-fns/getMonth (0-11) in the current implementation, but the type doesn’t document that. Please clarify whether month is 0-based or 1-based (and document it here) to prevent off-by-one usage in slot implementations.
| year: number | |
| year: number | |
| /** 0-based month index, as in `date-fns/getMonth` (0 = January, 11 = December). */ |
| | Name | Parameters | Description | Version | | ||
| | --- | --- | --- | --- | | ||
| | date-cell | `(props: { year: number, month: number, date: number })` | The content of the date cell. | NEXT_VERSION | | ||
| | date-icon | `()` | Date icon of the input box. | 2.29.0 | | ||
| | footer | `()` | Extra Footer. | | | ||
| | next-month | `()` | Next icon of the date panel. | 2.33.4 | | ||
| | next-year | `()` | Fast next icon of the date panel. | 2.33.4 | | ||
| | prev-month | `()` | Prev icon of the date panel. | 2.33.4 | | ||
| | prev-year | `()` | Fast prev icon of the date panel. | 2.33.4 | | ||
| | separator | `()` | Separator of range picker. | 2.29.0 | |
There was a problem hiding this comment.
The docs for date-cell don’t clarify whether month is 0-based or 1-based, while the component passes getMonth() (0-11). Please document the month range/indexing in the Parameters column to avoid off-by-one confusion. Also, NEXT_VERSION appears to be a placeholder (no other occurrences in docs); consider replacing it with the actual version number or leaving it blank to match the rest of the tables.
| | 名称 | 参数 | 说明 | 版本 | | ||
| | --- | --- | --- | --- | | ||
| | date-cell | `(props: { year: number, month: number, date: number })` | 日期单元格的内容 | NEXT_VERSION | | ||
| | date-icon | `()` | 日期输入框的图标 | 2.29.0 | | ||
| | footer | `()` | 添加额外的页脚 | | | ||
| | next-month | `()` | 日期面板的 `下一个` 图标 | 2.33.4 | | ||
| | next-year | `()` | 日期面板的 `快速下一个` 图标 | 2.33.4 | | ||
| | prev-month | `()` | 日期面板的 `上一个` 图标 | 2.33.4 | | ||
| | prev-year | `()` | 日期面板的 `快速上一个` 图标 | 2.33.4 | | ||
| | separator | `()` | 日期范围分隔符号 | 2.29.0 | |
There was a problem hiding this comment.
date-cell slot docs should clarify whether month is 0-based or 1-based (implementation uses getMonth() → 0-11). Please update the Parameters/说明 to state the month range/indexing to avoid off-by-one issues. Also, NEXT_VERSION looks like a placeholder (not used elsewhere); consider using the real version number or leaving it empty for consistency.
| {renderDateCell( | ||
| datePickerSlots['date-cell'], | ||
| dateItem.dateObject | ||
| )} |
There was a problem hiding this comment.
This introduces new rendering behavior via the date-cell slot, but there’s no corresponding test to verify slot content is rendered for at least type="date" and a range type. Since src/date-picker/tests/DatePicker.spec.tsx already covers many props, please add a regression test that mounts NDatePicker with a date-cell slot and asserts the custom content appears in the panel.
- 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
…ality * feat: rename the custom date cell variable to the more semantic `date-cell` * docs: improve the example styles in the demo documentation
Gahotx
force-pushed
the
feat/date-picker-date-slot
branch
from
59cd07e to
ed05d7c
Compare
close #6614
close #6751
close #7237
基于 #7382 完善该自定义日期单元格内容的功能，由于原PR的作者好像没空合并代码，所以我单独提交一个新的PR
eslint报错script setup语法date插槽改为date-cell更符合语义化修改前：
修改后：