title: close datepicker menu using button-reactjs
body: <p>I am new to <code>reactjs</code>. I have used a <code>date picker</code> from <code>ant js</code>.
  When i clicked the <code>date picker</code>, it gets opened. In the <code>footer</code> of the menu, i have a <code>compare date</code> checkbox and a <code>range picker</code> attached with it. If the user clicks the <code>check box</code>, the <code>compare date picker</code> gets activated.
  In bottom side, I have a <code>submit</code> and <code>cancel</code> button.
  Here's the picture, how it looks like,</p>
  
  <p><a href="https://i.stack.imgur.com/GacFo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GacFo.png" alt="enter image description here"></a></p>
  
  <p>My Question is When i select and drag the range in the <code>above date picker</code>, the menu gets closed automatically and the selected <code>range date</code> was assigned. But i don't need the <code>datepicker menu</code> to be automatically closed after selection. It should be closed only  when the user clicks the <code>submit</code> button. I know <code>open</code> props helps me to handle this. I read the documentation <a href="https://ant.design/components/date-picker/#header" rel="nofollow noreferrer">https://ant.design/components/date-picker/#header</a> .But I don't know how to use in this case. </p>
  
  <p>I also need a verification which is, if the user ticks the  <code>compare with</code> check box, i want to check whether there is value in <code>compare date range</code>. If the user doesn't set the <code>compare date range</code> value, i want to warn him when he clicks <code>submit</code> button. And also if the user doesn't set the <code>above date range</code>, i should warn him when he clicks the <code>submit</code> button.
  Please help me with some solutions.</p>
  
  <p>Here's the Code I tried:</p>
  
  <pre><code>import React from 'react';
  import { DatePicker, Checkbox} from 'antd';
  import moment from "moment";
  class DateCheck extends React.Component {
      state = { startDate:moment(),endDate:moment(),dateCompareEntry:true,cstartDate:moment(),cendDate:moment()}
  
      onDateChange(date) {this.setState({startDate:date[0]['_d'],endDate: date[1]['_d']})}
      onInitialDateSet(){
          var end_date = new Date();
          end_date.setDate(end_date.getDate()-15)
          this.setState({startDate:new Date(), endDate:end_date})
      }
      onDateCompareCheckClick(e){this.setState({dateCompareEntry:e.target.checked?false:true})}
      onCompareDateChange(date) {this.setState({cstartDate:(date[0]['_d']),cendDate: date[1]['_d']})}
      onSubmitFun(){console.log("submit Fun")}
      onCancelFun(){
          console.log("cancel Fun")
          var end_date = new Date();
          end_date.setDate(end_date.getDate()-15)
          this.setState({startDate:new Date(), endDate:end_date})
          this.setState({dateCompareEntry:true,cstartDate:moment(),cendDate:moment()})
  
      }
      componentDidMount(){this.onInitialDateSet()}
      render() {
          const { RangePicker } = DatePicker;
          return (
              &lt;div style = {{display:"flex",justifyContent:"flex-end", width:"100%"}} &gt;    
                  &lt;RangePicker 
                      renderExtraFooter={() =&gt; 
                          &lt;div style={{display:"flex",flexDirection:"column"}}&gt;
                              &lt;div &gt;
                                  &lt;Checkbox onChange = {(e)=&gt;{this.onDateCompareCheckClick(e)}}&gt;Compare With&lt;/Checkbox&gt;
                                  &lt;RangePicker 
                                      size={'small'}
                                      disabled={this.state.dateCompareEntry} 
                                      onChange ={this.onCompareDateChange.bind(this)}
                                      &gt;
                                  &lt;/RangePicker&gt;
                              &lt;/div&gt;
                              &lt;div style={{marginBottom:"1%",display:"flex",justifyContent:"center"}}&gt;
                                  &lt;div&gt;
                                      &lt;Button  onClick={this.onSubmitFun.bind(this)}  size="small" type="primary" icon="search"&gt;Submit&lt;/Button&gt;
                                  &lt;/div&gt;
                                  &lt;div style={{marginLeft:"2%"}}&gt;
                                      &lt;Button onClick={this.onCancelFun.bind(this)} size="small" type="danger" icon="close-circle"&gt;Cancel&lt;/Button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      } 
                      defaultValue={[ moment(this.state.startDate),moment(this.state.endDate)]} 
                      style={{width:'40%'}} size={'small'} 
                      onChange={this.onDateChange.bind(this)} /&gt;  
              &lt;/div&gt;
          );
      }
  }
  export default DateCheck
  </code></pre>