javascript 未应用React日期选择器css

ffdz8vbo  于 2023-01-24  发布在  Java
关注(0)|答案(2)|浏览(138)

我正在使用一个基于Symfony的react应用程序,并尝试使用react-datepicker模块包含一个datepicker。
我可以创建日期选择器对象,但它的样式似乎不正确--当我点击选择日期时,页面顶部只有一个垂直的数字列表(我在网上看到很多人遇到过这种情况,通常是因为他们没有导入日期选择器css)。
我正在导入react-datepicker.css文件,如果我在浏览器中检查我的datepicker对象,它会显示:class=“react-datepicker-wrapper”,所以我假设导入工作正常。
我想知道我是否还需要对应用程序中的另一个文件做一些其他的事情,也许是对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>
      );
    }
  }
}
rpppsulh

rpppsulh1#

来自以下网址的文档:https://github.com/Hacker0x01/react-datepicker
您还需要此包中的CSS文件(或提供您自己的CSS文件)。下面的示例显示了如果您的生成系统支持所需的CSS文件(Webpack支持),如何包含此包中的CSS。
将此行添加到代码中... import "react-datepicker/dist/react-datepicker.css";
比如说...

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)} />
  );
};
kb5ga3dv

kb5ga3dv2#

像这样进口,对我很有效

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

相关问题