封装datePicker组件

DatePicker组件的二次封装可以按照以下步骤进行：

1. 引入antd的DatePicker组件和相关样式。

import React from 'react';
import { DatePicker } from 'antd';
import 'antd/dist/antd.css';

2. 创建一个名为YearPicker的组件，继承自React.Component。

class YearPicker extends React.Component {
  // ...
}

3. 在YearPicker组件中添加一个名为value的属性，用于存储当前选择的年份。同时，为DatePicker组件添加onChange事件处理函数，用于更新value的值。

class YearPicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
    };
  }

  onChange = (date, dateString) => {
    this.setState({ value: dateString });
  };

  render() {
    const { value } = this.state;
    return (
      <div className="yearPicker">
        <DatePicker
          placeholder="请选择年份"
          format="YYYY"
          mode="year"
          value={value}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

4. 如果需要支持混合输入类型，可以在onChange函数中对不同格式的日期进行处理。例如，可以使用正则表达式匹配不同格式的日期，并将其转换为统一的格式。

5. 如果需要隐藏输入框，可以将输入框的HTML代码移除，只保留DatePicker组件。

6. 如果遇到清除按钮不生效的问题，可以尝试重写清空事件或者设置allowClear属性为false。如果需要将输入框隐藏掉，可以参考上面的示例代码。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>