antd的DatePicker组件怎么自定义页脚

做项目的时候有一个自定义页脚的需求，年初、年末是我自定义的；样式如下图

自定义页脚.jpg

思路整理：自己写input--自己定义图标—隐藏默认显示出来的datepicker组件--通过点击图标的时候手动控制datepicker组件显示出来—选中日期或者自定义页脚的时候赋值给要传给后台的变量

代码解读：

在解读代码前需要了解antd官网定义的几个方法

1.renderExtraFooter//antd官网提供的加入额外页脚的方法

2.open//antd官网提供的控制弹层是否展开的方法 true是打开，false是关闭

3.onOpenChange //antd官网提供的弹出日历和关闭日历的回调，里面有一个内置参数status，我在外层定义了一个参数Pickerstatus和状态同步

4.getCalendarContainer //antd官网提供的定义浮层的容器的方法，因为是自定义的所以浮窗的位置可能不满意，我们可以定义一下他的父元素，然后在进行具体的调节位置

render中的input是自己定义的，其中里面定义了一个icon日历图标，当点击的时候，触发datepicker组件的弹出。其中组件的弹出和关闭时手动设置的变量 Pickerstatus默认是false, 点击的时候使Pickerstatus变为true
render中的datepicker组件默认是显示的状态，所以，我在里面设置了一个样式display:none;不让他显示，
通过open方法根据参数的true/false来手动控制什么时候显示和隐藏，
通过renderExtraFooter自定义页脚(我是放在了renderyear方法中定义了两个tag标签年初年末)，点击年初年末的时候利用事件对象e.target.value获取点击的value值然后赋值给显示在input中的value值this.label，同时点击完之后让datepicker弹窗关闭
代码如下

state={
     Pickerstatus: false,
}
//点击图标的时候弹窗弹出来
  handleCalenderInput = () => {
    this.setState({
      Pickerstatus: true
    });
  };
//日期组件额外的页脚
  renderyear = () => {
    return (
      <div>
        <Tag color="#108ee9" onClick={this.TagClick} data-value="年初">
          年初
        </Tag>
        <Tag color="#108ee9" onClick={this.TagClick} data-value="年末">
          年末
        </Tag>
      </div>
    );
  };

  //点击标签的时候触发的函数
  TagClick = e => {
    console.log("e", e);
    console.log("e.target", e.target); //其作用是指向返回事件的目标节点(触发该事件的节点)
    console.log("e.target.dataset", e.target.dataset);
    this.setState({
      addSchedukeTime: e.target.dataset.value,
      Pickerstatus: false
    });
    this.label = e.target.dataset.value;
  };
  //点击图标的时候弹窗弹出来
  handleCalenderInput = () => {
    this.setState({
      Pickerstatus: true
    });
  };
  //时间改变的时候调用的方法
  datepickerChange = (date, dateString) => {
    console.log(date, dateString);
    this.setState({
      addSchedukeTime: dateString
    });
    this.label = dateString;
  };

render(){
    return(
    <div id="toparea">
        <Input
        value={this.label}
        readOnly
        suffix={
        <Icon onClick={this.handleCalenderInput}  type="calendar"/>
        }
    />
    <DatePicker
        style={{ display: "none", position: "absolute" }}
        disabled={disabled}
        onChange={this.datepickerChange}
        placeholder="请选择"
        mode={"date"}
        open={this.state.Pickerstatus} //antd官网提供的控制弹层是否展开的方法
        renderExtraFooter={this.renderyear} //antd官网提供的加入额外页脚的方法
        getCalendarContainer={() =>  //antd官网提供的定义浮层的容器的方法
        document.getElementById("toparea")
        }
        onOpenChange={status => { //antd官网提供的弹出日历和关闭日历的回调
           if (!status) {
            this.setState({
            Pickerstatus: false
            });
          }
        }}
    />
    </div>
 )
}