前端---antd中的日期选择组件

React---使用antd中的DatePicker实现YearPicker

    • 需求React
    • 现有的组件类型
    • 手动实现YearPicker

需求React

需要设计一个时间选择框,但是只需要选中某年即可,且拿到选择的这年的值作为url请求参数去请求数据。

当用户需要获取一个某年的日期,可以点击标准输入框,弹出日期面板进行选择。如下图:
前端---antd中的日期选择组件_第1张图片

现有的组件类型

日期类组件包括以下四种形式。(无YearPicker)

  • DatePicker
  • MonthPicker
  • RangePicker
  • WeekPicker
    此时,我们翻看组件提供的API,发现虽然没有YearPicker,但是提供了mode属性,可以设置为year。但是如果这样设置后,虽然真的只能看到某年,但是却无法选中某年以及在选择完成后关闭选择框。
    在这里插入图片描述

手动实现YearPicker

import {
    DatePicker } from 'antd';  //引入DatePicker组件

你可能感兴趣的:(前端,前端,react)