ant-design / ant-design/pro-components
🧐[问题] 在 EditableProTable 组件中使用日期选择器,是否可以支持 dayjs 数据格式双向绑定?
- Dominant language
- TypeScript
- Stars
- 4.8k
- Forks
- 1.4k
- Avg merge
- 10h 44m
- Merged PRs (30d)
- 3
Description
### 🧐 问题描述
有些情况下,可能需要自定义 EditableProTable 中的日期表单,并且有联动的效果。比如开始时间和结束时间选择框是分开的,我想给两个 Picker 传 disabledDate 属性用于禁用一些时间段。但是我发现 onValuesChange 触发时日期格式是字符串,似乎 antd 里的 DatePicker 目前仅支持传入 Dayjs,选日期的时候就报错了,我需要在 onValuesChange 触发时遍历 list,修正日期的格式为 Dayjs。
```ts
const udpateDataSource = useCallback((newDataSource: IDataSource[]) => {
return newDataSource.map((item) => {
const { startTime, endTime } = item;
if (startTime) { // 修正
item.startTime = dayjs(startTime).startOf("day");
}
if (endTime) { // 修正
item.endTime = dayjs(endTime).endOf("day");
}
return item;
});
}, []);
```
### 💻 示例代码
[codesandbox](https://codesandbox.io/p/sandbox/antd-editable-pro-table-7vnt5z?file=%2Fsrc%2FApp.tsx%3A327%2C47&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clu21vydy00063b6gs8tn53vb%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clu21vydy00023b6g20ecnghj%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clu21vydy00033b6gh4ddimvp%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clu21vydy00053b6gjwp31in8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clu21vydy00023b6g20ecnghj%2522%253A%257B%2522id%2522%253A%2522clu21vydy00023b6g20ecnghj%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clu223l7l00023b6gy7z0do65%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A327%252C%2522startColumn%2522%253A47%252C%2522endLineNumber%2522%253A327%252C%2522endColumn%2522%253A47%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clu223l7l00023b6gy7z0do65%2522%257D%252C%2522clu21vydy00053b6gjwp31in8%2522%253A%257B%2522id%2522%253A%2522clu21vydy00053b6gjwp31in8%2522%252C%2522activeTabId%2522%253A%2522clu2324sc00n13b6g8nm9jd6v%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clu2324sc00n13b6g8nm9jd6v%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clu21vydy00033b6gh4ddimvp%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clu21vydy00033b6gh4ddimvp%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
### 🚑 其他信息
"@ant-design/pro-components": "2.6.51"
Contributor guide
Research direction
Start with the provided CodeSandbox example in src/App.tsx around line 327 and reproduce the EditableProTable date-picker behavior. Trace how date values change through onValuesChange and compare them with the Dayjs values required by the picker. Done means date fields support the requested two-way Dayjs binding and the linked start/end-date example works without manual conversion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100