how do I set the min and max date for date fields?

Question

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).

if I use datepicker I can use the min and max attributes but am using bootstrap date <Form.Control type="date" name="endDate" placeholder="endDate" onChange={this.endDatemyChangeHandler}/> do not have these attributes.

a) how can I achieve min and max attribute?.

b) I am using the placeholder="endDate" but in UI still showing the dd/mm/yyyy instead of endDate

c) Is it possible to enable the date field to enter dates from keyboard?

below is my complete code

import React from 'react'
import { Form } from 'react-bootstrap';
import './download.css';
import "./App.css";



class BootstrapDate extends React.Component{

    constructor(props) {
        super(props);
        this.state = { startDate: '' };
      }

    myChangeHandler = (event) => {
        this.setState({startDate: event.target.value});
      }

      endDatemyChangeHandler = (event) => {
        this.setState({endDate: event.target.value});
      }

     mySubmitHandler = (event) => {
        event.preventDefault();
        alert("You are submitting "+"startDate==" + this.state.startDate +"endDate=="+ this.state.endDate);
      }
 

    render(){

        return(
            <div id="container">
                <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"></link>
                <img  src="\is.jpg"   id="ui-image"></img>
                <div className="row">
                    <div className="col-md-4">
                        <Form.Group controlId="startDate">
                            <Form.Control type="date"  name="startDate" placeholder="startDate"  onChange={this.myChangeHandler}/>
                        </Form.Group>
                    </div>

                    <div className="col-md-4">
                        <Form.Group controlId="endDate">
                            <Form.Control type="date"  name="endDate" placeholder="endDate"  onChange={this.endDatemyChangeHandler}/>
                        </Form.Group>
                    </div>
                </div>
                <p  id="note_bootstrap">Note: Only up to 3 years worth of Data can be downloaded</p>
                <div>
                    { this.state.startDate && this.state.endDate && 
                     <button  id="button_bootsrap" onClick={this.mySubmitHandler} variant="primary" className="fa fa-download" >Download</button>
                    }
                </div>
            </div>
        )
    }
    
}

export default BootstrapDate;

Answer 1

First of, I'm using functional components in general and "React Boostrap Components" for the framework, so my answer going to be from that context.

For A and B:

If i had a date object i would do preprocess the object like this:

// date parameter is a date object
const setDate = (date) => {

  // first convert date object to string
  let date_as_string = date.toString();

  // split the string and get the date part
  let date = date.split("T")[0];

  // return the date string
  return date;
}

I would insert the variables like this in a Boostrap From Controller. This datepicker have set the default value from a variable and max date is set to current date.

<Form.Control
  type="date"
  max={new Date().toISOString().split("T")[0]}
  defaultValue={setToday(date_variable)}
/>

PS: I would also had added an onBlur or onChange attribute with a function that changed to current date if user input exceeded the max date.

C : I don't have any good answers as I haven't had an issue with keyboad input for datepicker.