Как правильно настроить отображение даты?

Question

Я не могу сделать так, чтобы компонент реагировал на указатель даты правильно.

он действительно отображается как this .

Я бы хотел, чтобы он отображался как минимум как документация для компонента: .

Сначала я подумал, что это проблема с зависимостями, и добавил все зависимости, которые, по словам доктора, необходимы.Результат остается прежним.

В некоторых вопросах об стеке потока говорилось об этом и упоминалась отсутствующая таблица стилей.Однако я импортировал все с помощью npm, так что это не должно быть проблемой.

Мой компонент класса выглядит следующим образом:

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;

Я заранее извиняюсь, если проблема очень очевидна, яЯ новичок в реакции.

Answer 1

Вы забыли импортировать пакет css.

Из документации: import "react-datepicker/dist/react-datepicker.css";

Answer 2

вы не импортировали их файл CSS.

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

Answer 3

Я думаю, что вы должны импортировать response-datepicker.css, а не только сам пакет.

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

Ниже приведен простой пример использования Datepicker в React. Посмотреть. Вам также потребуется файл CSS из этого пакета (или предоставить свой собственный). Пример ниже показывает, как включить CSS из этот пакет, если ваша система сборки поддерживает использование CSS-файлов (Webpack это тот, который делает).