Ant Design 日期框：如何实现只选择年份范围？

在Ant Design中，可以使用DatePicker组件来实现只选择年份范围的日期框。可以通过设置DatePicker的mode属性为"year"来限制只选择年份。\n\n以下是一个示例代码：\n\n\nimport { DatePicker } from 'antd';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\n\nfunction YearRangePicker() {\n const disabledDate = (current) => {\n // 禁用所有不在范围内的年份\n return current && (current.year() < 2010 || current.year() > 2022);\n };\n\n return (\n <RangePicker\n picker="year"\n disabledDate={disabledDate}\n format="YYYY"\n value={[moment('2010', 'YYYY'), moment('2022', 'YYYY')]}\n onChange={(dates, dateStrings) => {\n console.log('Selected Year Range:', dateStrings);\n }}\n />\n );\n}\n\nexport default YearRangePicker;\n\n\n在上述代码中，我们使用了RangePicker组件，并设置了picker属性为"year"来限制只选择年份。通过disabledDate函数，我们可以自定义禁用不在范围内的年份。format属性可以设置日期的显示格式，这里我们只显示年份，所以设置为"YYYY"。value属性用于设置默认选中的年份范围，onChange事件可以获取选择的年份范围。\n\n注意：上述代码需要配合Ant Design和moment库使用。