React DatePicker component

Question

Hi I need help to properly write the code full working for Datepicker: https://reactdatepicker.com/ I have trouble importing the css and after spending too much time I decided to just grab the code. Please help make it work and forgive me as I am new to react. Thanks.

import DatePicker from "react-datepicker";

function DatePicker() {

    const [startDate, setStartDate] = useState(new Date());
    const MyContainer = ({ className, children }) => {

        return (
          <div style={{ padding: "16px", background: "#216ba5", color: "#fff" }}>
            <CalendarContainer className={className}>
              <div style={{ background: "#f0f0f0" }}>
                What is your favorite day?
              </div>
              <div style={{ position: "relative" }}>{children}</div>
            </CalendarContainer>
          </div>
        );
      };

      return (
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
          calendarContainer={MyContainer}
        />
      );
    };

export default DatePicker```

I can't make this work: import 'react-datepicker/dist/react-datepicker-cssmodules.css'; I know there is thread out there for this but I already spent time without result so I decided to grab the code and manully add it but I am new to react and I don't know what I am lacking in the code above to work. — Jan Dohinog
– Jan Dohinog, Commented Jun 5, 2021 at 4:48
thanks. I'm a total beginner so I would appreciate your help make it work. I grabbed it here: reactdatepicker.com — Jan Dohinog
– Jan Dohinog, Commented Jun 5, 2021 at 4:53

John Lobo · Accepted Answer · 2021-06-05 05:11:54Z

2

I have tested it.It loads fine.Here is the code

import React from 'react';
import DatePicker,{ CalendarContainer } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";


function App() {
  const [startDate, setStartDate] = React.useState(new Date());
  const MyContainer = ({ className, children }) => {

    return (
      <div >
        <CalendarContainer className={className}>
          <div style={{ background: "#f0f0f0" }}>
            What is your favorite day?
              </div>
          <div style={{ position: "relative" }}>{children}</div>
        </CalendarContainer>
      </div>
    );
  };

  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      calendarContainer={MyContainer}
    />
  );
}

export default App;

edited Jun 5, 2021 at 5:11

answered Jun 5, 2021 at 4:59

John Lobo

15.4k2 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jan Dohinog Over a year ago

I'm getting an error: ./src/App.js Module not found: Can't resolve 'react-datepicker' in 'C:\Users\JD\Desktop\date-picker\src'

John Lobo Over a year ago

you should copy only inside code component not entire think .Since your component name is DatePicker but in my case its App so

Jan Dohinog Over a year ago

I created a new react app. I figure out I missed to npm install react-datepicker --save let me check again

Collectives™ on Stack Overflow

React DatePicker component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related