在业务开发中,你可能有年份选择,月份范围选择,周范围选择等需求,此时你给现有组件增加了 mode 属性,却发现无法进行点击选择行为,面板也不会关闭。如果给面板添加 disabledDate 也不会相应禁用对应的年/月/周。
具体例子可以点击这个链接查看
原因
因为 <DatePicker mode="year" />
不等于 YearPicker
,<RangePicker mode="month" />
不等于 MonthRangePicker
。 mode
属性是在 antd 3.0 时,为了控制面板展现状态而添加的属性,以支持展示时间面板等需求而添加的。mode
只会简单的改变当前显示的面板,不会修改默认的交互行为(比如 DatePicker 依然是点击日才会完成选择并关闭面板)。
同样的,disabledDate
对于任何 <DatePicker />
也只会针对日面板生效,并不会对 <DatePicker mode="year/month" />
上的年/月面板生效。
解决方法
你可以参照 这篇文章 或者 这篇文章 里的做法,利用 mode
和 onPanelChange
等方法去封装一个 YearPicker
等组件。
Antd Design 官方团队已经在在 antd@4.0 版本中新增了 YearPicker
MonthPicker
等组件,而且可以配置 disabledDate
。