项目中需要填写年份，产品觉得手动输入不太严谨，需要做成年份选择器。

去 antdesign 官网查看，发现有受控面板，通过组合 mode 和 onPanelChange 可以控制要展示的面板。

<DatePicker
  mode="year"
  placeholder="请选择年份"
  format="YYYY"
  onPanelChange={this.handlePanelChange}
/>

handlePanelChange = value => {
  console.log(">>>>>", value)
  // 处理得到的 value
  // ...
};

可以通过 onPanelChange 获取到时间，但是获取到时间之后面板并没有关闭。

再次去官网查看，发现有 open 属性和 onOpenChange 回调， open 属性控制弹层是否展开， onOpenChange 回调是弹出日历和关闭日历的回调。

 constructor(props) {
    super(props);
    this.state = {
      isopen: false,
      time: null,
    };
  }

  // 弹出日历和关闭日历的回调
  handleOpenChange = status => {
    // console.log(status)
    if (status) {
      this.setState({ isopen: true });
    } else {
      this.setState({ isopen: false });
    }
  };

  //得到 value 并处理
  handlePanelChange = value => {
    // console.log(">>>>>", value)
    //处理 value 操作
    //...
    //设置 isopen
    this.setState({
      isopen: false,
    });
  };

  //清除输入框中的值，点击控件的 x ，清除值操作
  clearValue = () => {
    this.setState({      
      time: null,
    })  
  };
  
  render() {
    return (
      <DatePicker
        value={this.state.time}
        open={this.state.isopen}
        mode="year"
        placeholder="请选择年份"
        format="YYYY"
        onOpenChange={this.handleOpenChange}
        onPanelChange={this.handlePanelChange}
        onChange={this.clearValue}
      />
    );
  }  

总结：通过 open 属性控制面板的开关，通过 onOpenChange 处理面板开关的回调，通过 onPanelChange 得到所选日期的值，通过 onChange 来清除选中的值。