Using React-Datepicker with Bootstrap

We can use react-datepicker with Bootstrap easily.

We should either use Reactstrap or React Bootstrap to add Bootstrap to our app.

In this article, we’ll use React Bootstrap with react-datepicker.

First, we install both by running:

npm install react-bootstrap bootstrap react-datepicker

Bootstrap is required by React-Bootstrap. react-datepicker is also installed.

Then we can use both of them together by writing:

import React, { useState } from "react";
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";
import { Container, Row, Col } from "react-bootstrap";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="App">
      <Container fluid>
        <Row>
          <Col>
            <DatePicker
              selected={startDate}
              onChange={date => setStartDate(date)}
            />
            <p>{startDate.toString()}</p>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

We imported the Container, Row, and Col components from React Bootstrap.

These are components for a container to hold other elements. fluid makes it responsive.

Inside Col, we have DatePicker component from react-datepicker.

Also, we imported the CSS file that comes with react-datepicker so that the date picker is displayed with proper styles.

We have the selected prop that’s set to the startDate state.

onChange is set to a function that calls setStartDate to set the state.

Then we see an input box that shows a date picker when we click on it.

When we click a date, then the date that’s selected is displayed below the input box.

useState has new Date() as its argument, so its initial value will be the current date and time.

So when we first load the page, the current date will be selected on the date picker.

react-datepicker and Bootstrap can be used together. We just have to use React derives of Bootstrap like React Bootstrap or Reactstrap.