react-datepicker 没有正确显示日期答案

【问题标题】：react-datepicker not showing date correctlyreact-datepicker 没有正确显示日期
【发布时间】：2021-08-07 15:53:19
【问题描述】：

我想在 react 中使用 react-datepicker，但我不知道为什么不能正确显示日历，也不知道为什么它不工作以及如何修复它..

这是我的代码

import DatePicker from "react-datepicker";
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";

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


function ProfileDetails() {
  const [startDate, setStartDate] = useState(
    setHours(setMinutes(new Date(), 30), 16)
  );

  return (
    <>
          <DatePicker
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            showTimeSelect
            includeTimes={[
              setHours(setMinutes(new Date(), 0), 17),
              setHours(setMinutes(new Date(), 30), 18),
              setHours(setMinutes(new Date(), 30), 19),
              setHours(setMinutes(new Date(), 30), 17),
            ]}
            dateFormat="MMMM d, yyyy h:mm aa"
            inline
          />
    </>
)
}

它只是像这张图片一样在列方向显示日期..

【问题讨论】：

我怀疑 react-datepicker.css 不知何故未加载 - 使用开发工具检查是否存在预期的样式。
我检查过，但正如你所说的没有加载，我不知道为什么？ :(
这取决于项目的构建方式（webpack？）和服务方式。发布您的项目目录结构和 webpack 配置文件（或您正在使用的任何构建器）是必要的。
是的，我使用 webpack，我使用 css module 我的意思是如果我想使用 css 样式，我将像这样导入 import styles from '..PATH' 当我想为按钮设置 className 'btn1' 时，我应该使用<button className={styles.btn1}> HELLO WORLD </button> ..我不知道它是否有问题

标签： javascript reactjs react-datepicker

【解决方案1】：

css 导入或 CSS 加载器肯定存在一些问题。当我复制您的代码时，它可以正常工作。但是当我评论 css 导入时，它的行为与您上面提到的完全一样。

【讨论】：

我使用 CSS MODULE 我的意思是如果我想为按钮设置类名 btn1 我应该使用 ``` import styles from '...PATH'``` 然后添加类名 @987654323 @关于它的更多信息，使用这个模块有什么问题吗？ (create-react-app.dev/docs/adding-a-css-modules-stylesheet)