I have this datepicker below. How can I save the value of the input date the user chooses in a const so that I can later use? I apologize if the question is beginner-ish.

import React from 'react'
import { Form } from 'react-bootstrap';

class BootstrapDate extends React.Component{

    render(){

        return(
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <Form.Group controlId="duedate">
                            <Form.Control type="date" name="duedate" placeholder="Due date" />
                        </Form.Group>
                    </div>
                </div>
            </div>
        )
    }

}

export default BootstrapDate;

I have this datepicker below. How can I save the value of the input date the user chooses in a const so that I can later use? I apologize if the question is beginner-ish.

import React from 'react'
import { Form } from 'react-bootstrap';

class BootstrapDate extends React.Component{

    render(){

        return(
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <Form.Group controlId="duedate">
                            <Form.Control type="date" name="duedate" placeholder="Due date" />
                        </Form.Group>
                    </div>
                </div>
            </div>
        )
    }

}

export default BootstrapDate;

• javascript
• reactjs
• react-bootstrap

1 Answer 1

Just add a Value and Onchage Method in Form.Control

import "./styles.css";
import Form from "react-bootstrap/Form";
import { useState } from "react";

export default function App() {
  const [date, setDate] = useState(new Date());

  console.log("DATE", date);

  return (
    <div className="App">
      <div>
        <div className="row">
          <div className="col-md-12">
            <Form.Group controlId="duedate">
              <Form.Control
                type="date"
                name="duedate"
                placeholder="Due date"
                value={date}
                onChange={(e) => setDate(e.target.value)}
              />
            </Form.Group>
          </div>
        </div>
      </div>
    </div>
  );
}