react-datepicker css not being applied

I’m using a Symfony-based react application and am trying to include a datepicker using the react-datepicker module.

I can create the datepicker object, but it does not appear to be styled correctly – when I click to select the date, there is just a vertical list of numbers that go to the top of the page (I’ve seen lots of people experience this online, often because they have not imported the datepicker css).

I am importing the react-datepicker.css file and if I inspect my datepicker object in the browser it says: class="react-datepicker-wrapper", so I presume that the import is working.

I am wondering whether I also need to do something else to another file within my application, perhaps to the webpack file, or maybe something else Symfony-related, but I’m a real novice with those things and am a bit stuck.

Your help would be much appreciated! Code below!

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

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


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

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

  setStartDate(startDate) {
      startDate: startDate


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

      return (
            From: <DatePicker
              onChange={startDate => this.setStartDate(startDate)}

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *