React---使用antd中的DatePicker实现YearPicker
需求React
需要设计一个时间选择框,但是只需要选中某年即可,且拿到选择的这年的值作为url请求参数去请求数据。
当用户需要获取一个某年的日期,可以点击标准输入框,弹出日期面板进行选择。如下图:
现有的组件类型
日期类组件包括以下四种形式。(无YearPicker)
- DatePicker
- MonthPicker
- RangePicker
- WeekPicker
此时,我们翻看组件提供的API,发现虽然没有YearPicker,但是提供了mode属性,可以设置为year。但是如果这样设置后,虽然真的只能看到某年,但是却无法选中某年以及在选择完成后关闭选择框。
手动实现YearPicker
import {
DatePicker } from 'antd'; //引入DatePicker组件
import moment from 'moment'; //引入moment