antd的DatePicker组件怎样自己设置页脚

思路整理：自己写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> )}