title: how do I set the min and max date for date fields?
body: <p>I am developing start date and end date field screen using React JS and Bootstrap now I need add validation for end date field.
  For example : start date 01/01/2021 end date should allow to select from 01/01/2021(start date) up to 3 years(01/01/2023).</p>
  <p>if I use <em><strong>datepicker</strong></em> I can use the min and max attributes but am using bootstrap date <code>&lt;Form.Control type=&quot;date&quot;  name=&quot;endDate&quot; placeholder=&quot;endDate&quot;  onChange={this.endDatemyChangeHandler}/&gt;</code> do not have  these attributes.</p>
  <p><strong>a)</strong> how can I achieve <em><strong>min</strong></em> and <em><strong>max</strong></em> attribute?.</p>
  <p><strong>b)</strong> I am using the <strong><code>placeholder=&quot;endDate&quot;</code></strong> but in UI still showing the <strong>dd/mm/yyyy</strong> instead of <em><strong>endDate</strong></em></p>
  <p><strong>c)</strong> Is it possible to enable the date field to enter dates from keyboard?</p>
  <p>below is my complete code</p>
  <pre><code>import React from 'react'
  import { Form } from 'react-bootstrap';
  import './download.css';
  import &quot;./App.css&quot;;
  
  
  
  class BootstrapDate extends React.Component{
  
      constructor(props) {
          super(props);
          this.state = { startDate: '' };
        }
  
      myChangeHandler = (event) =&gt; {
          this.setState({startDate: event.target.value});
        }
  
        endDatemyChangeHandler = (event) =&gt; {
          this.setState({endDate: event.target.value});
        }
  
       mySubmitHandler = (event) =&gt; {
          event.preventDefault();
          alert(&quot;You are submitting &quot;+&quot;startDate==&quot; + this.state.startDate +&quot;endDate==&quot;+ this.state.endDate);
        }
   
  
      render(){
  
          return(
              &lt;div id=&quot;container&quot;&gt;
                  &lt;link rel=&quot;stylesheet&quot; href= &quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quot;&gt;&lt;/link&gt;
                  &lt;img  src=&quot;\is.jpg&quot;   id=&quot;ui-image&quot;&gt;&lt;/img&gt;
                  &lt;div className=&quot;row&quot;&gt;
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Form.Group controlId=&quot;startDate&quot;&gt;
                              &lt;Form.Control type=&quot;date&quot;  name=&quot;startDate&quot; placeholder=&quot;startDate&quot;  onChange={this.myChangeHandler}/&gt;
                          &lt;/Form.Group&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;col-md-4&quot;&gt;
                          &lt;Form.Group controlId=&quot;endDate&quot;&gt;
                              &lt;Form.Control type=&quot;date&quot;  name=&quot;endDate&quot; placeholder=&quot;endDate&quot;  onChange={this.endDatemyChangeHandler}/&gt;
                          &lt;/Form.Group&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;p  id=&quot;note_bootstrap&quot;&gt;Note: Only up to 3 years worth of Data can be downloaded&lt;/p&gt;
                  &lt;div&gt;
                      { this.state.startDate &amp;&amp; this.state.endDate &amp;&amp; 
                       &lt;button  id=&quot;button_bootsrap&quot; onClick={this.mySubmitHandler} variant=&quot;primary&quot; className=&quot;fa fa-download&quot; &gt;Download&lt;/button&gt;
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
      
  }
  
  export default BootstrapDate;
  </code></pre>