💡
原文中文,约6000字,阅读约需15分钟。
📝
内容提要
该文章介绍了如何给 Antd 中的 DatePicker 添加「至今」功能,包括单个日期选择和区间日期选择的实现方法。同时,还介绍了处理 value 和 onChange 事件以及在外层 Form 表单中的处理。最终实现了添加「至今」按钮的功能。
🎯
关键要点
- 文章介绍了如何在 Antd 的 DatePicker 中添加「至今」功能。
- 该功能适用于教育经历和工作经历等表单场景,允许用户选择当前在职状态。
- 使用 <Input /> 标签来显示日期和「至今」文案,避免 <DatePicker /> 组件直接设置中文导致的 Invalid Date 问题。
- 单个日期选择中,通过 renderExtraFooter 属性添加「至今」按钮,并处理点击事件。
- 实现了日期的 value 和 onChange 事件的处理,确保「至今」状态的正确标识。
- 外层 Form 表单在提交时需要根据是否有 tillNow 属性转换日期格式。
- 区间日期选择的处理与单个日期类似,但需要处理两个日期的数组。
- 总结部分提到实现中未完全处理 props 参数,代码已上传至 GitHub。
➡️