javascript - How to get value of Form.Control - React Bootstrap Date Picker? - Stack Overflow

admin管理员组

文章数量:1335371

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

Share Follow asked Mar 1, 2021 at 21:19 chr0sychr0sy 8111 gold badge11 silver badge66 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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>
  );
}

本文标签： javascriptHow to get value of FormControlReact Bootstrap Date PickerStack Overflow