我正在使用一個基于Symfony的react應用程序，并試圖使用react-datepicker模塊包含一個datepicker。

我可以創建datepicker對象，但它的樣式似乎不正確——當我單擊選擇日期時，只有一個垂直的數字列表顯示在頁面頂部(我在網上見過很多人遇到這種情況，通常是因為他們沒有導入datepicker css)。

我正在導入react-datepicker.css文件，如果我在瀏覽器中檢查我的datepicker對象，它會說:react-date picker-wrapper & quot；，所以我推測進口工作。

我想知道我是否還需要對我的應用程序中的另一個文件做一些其他的事情，也許是對webpack文件，也許是其他與Symfony相關的東西，但我對這些事情是一個真正的新手，有點卡住了。

非常感謝你的幫助！代碼如下！

import DatePicker from "react-datepicker";
import "../../../node_modules/react-datepicker/dist/react-datepicker.css";


class MyWidget extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    }

  }

  handleCalendarClose() {
    console.log("Calendar closed")
  }

  handleCalendarOpen() {
    console.log("Calendar opened")
  }

  setStartDate(startDate) {
    this.setState({
      startDate: startDate
    });

  };


  render() {
    const { startDate } = this.state;

      return (
          <div>
            From: <DatePicker
              selected={startDate}
              onChange={startDate => this.setStartDate(startDate)}
              onCalendarClose={this.handleCalendarClose}
              onCalendarOpen={this.handleCalendarOpen}
            />
          </div>
      );
    }
  }
}

來自https://github.com/Hacker0x01/react-datepicker的文件

您還需要這個包中的CSS文件(或者 提供自己的)。下面的示例顯示了如何包含來自 如果你的構建系統支持需要CSS文件 (Webpack就是這樣的一個)。

將這行代碼添加到您的代碼中... 導入& quotreact-date picker/dist/react-date picker . CSS & quot；；

例如...

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

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

// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';

const Example = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
  );
};

像這樣的進口，對我來說是有效的

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

如果您的應用程序正在使用Remix，請在您的根文件中添加:

export const links: LinksFunction = () => [
          {
           rel: "stylesheet", 
           href: 'https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css'
          },
    ]

或者在Nextjs中:

<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />

webpack可能沒有正確加載CSS文件。您可以嘗試使用樣式加載器和css加載器模塊將CSS文件直接導入到組件中。

首先，安裝兩個模塊:

npm install style-loader css-loader --save-dev

然后，在組件中導入CSS文件，如下所示:

import React from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import styles from "./MyWidget.module.css";

const MyWidget = () => {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div className={styles.datePickerWrapper}>
      <DatePicker
        selected={startDate}
        onChange={date => setStartDate(date)}
      />
    </div>
  );
};

導出默認的MyWidget 在這個例子中，我還使用CSS模塊將自定義樣式應用于包裝器div。您可以在單獨的CSS文件中定義自己的樣式，并以與react-datepicker.css文件相同的方式導入它。