如何使 react-datepicker 正确显示？

Posted 2023-05-07

【中文标题】如何使 react-datepicker 正确显示？

【英文标题】：How to make react-datepicker display properly?

【发布时间】：2019-10-25 14:59:53

【问题描述】：

我无法让组件 react-datepicker 正确显示。

它实际上显示为this。

我希望它至少可以像 documentation for the component does 那样显示。

我首先认为这是一个依赖问题，并添加了文档所说的所有依赖项。结果还是一样。

一些 *** 问题谈到了这一点，并提到了缺少的样式表。但是我用 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;

如果问题非常明显，我提前道歉，我对 reactjs 很陌生。

【参考方案1】：

您忘记导入包 css。

来自文档：

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

【讨论】：

Aaaand 这样的初学者错误。非常感谢。

错过了导入这个??‍♂️。谢谢！

【参考方案2】：

我认为您也必须导入 react-datepicker.css，而不仅仅是包本身。

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

以下是如何在 React 中使用 Datepicker 的简单示例 看法。您还需要从这个包中获取 CSS 文件（或 提供你自己的）。下面的示例显示了如何包含来自的 CSS 如果您的构建系统支持需要 CSS 文件，则此包 （Webpack 就是这样）。

【讨论】：

您说得对。谢谢你。我会接受 adesurirey 的回答，因为它比你的回答早了几秒钟，但如果可以的话，我会同时接受。

没问题。我很高兴能帮上忙。 :)

【参考方案3】：

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

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