最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin9浏览0评论

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;
Share asked Mar 1, 2021 at 21:19 chr0sychr0sy 811 gold badge1 silver badge6 bronze badges
Add a ment  | 

1 Answer 1

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

发布评论

评论列表(0)

  1. 暂无评论