How to make react-datepicker display properly?

Question

I cannot make the component react-datepicker display properly.

it actually displays like this .

I wish it could display at least like the documentation for the component does .

I first thought it was a dependency problem, and added all the dependencies the doc says are needed. The result is still the same.

Some stackoverflow questions talked about this and referred to a missing stylesheet. However I imported everything with npm, so that shouldn't be the problem.

My class component looks like this :

import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";

class Filters extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate : new Date()
    };
    this.handleStartChange = this.handleStartChange.bind(this);
  }

  handleStartChange = (date) => {
    this.setState({
      startDate : date
    })
  }


  render() {
    return (
      <div className="filters">
          <div id="filterbox">
            <p id="titre">Filtres</p>
            <DatePicker 
              selected={this.state.startDate}
              onChange={this.handleStartChange} />
          </div>
      </div>
    )
  }
}



export default Filters;

I apologize in advance if the problem is very obvious, I'm quite new to reactjs.

Answer 1

You forgot to import the package css.

From the documentation:

import "react-datepicker/dist/react-datepicker.css";

Answer 2

I think you have to import the react-datepicker.css too, not only the package itself.

import "react-datepicker/dist/react-datepicker.css";

Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).

Answer 3

你还没有导入他们的 css 文件。

import "react-datepicker/dist/react-datepicker.css";