Languages

React - DatePicker popover doesn't open properly

0 points
Asked by:
p_agon
409

Today, I tried to use React Date Picker and it doesn't seem to work properly.

When I click on the input I get the following result:

React - DatePicker error
React - DatePicker error

How to achieve a pretty calendar layout instead of these numbers?

I want to get this effect when I click on the Expiration time input:

React - DatePicker expected result
React - DatePicker expected result

My code:

import React, { useState } from 'react';
import '../Styles/CreateTaskCard.css';
import DatePicker from 'react-datepicker';


const CreateTaskCard = () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <div className="createTaskCard">
      <label className="createTaskLabel">Title:</label>
      <input className="createTaskInput"></input>
      <label className="createTaskLabel">Description</label>
      <input className="createTaskInput"></input>
      <label className="createTaskLabel">Expiration time</label>
      <DatePicker
        selected={startDate}
        onChange={(date) => setStartDate(date)}
      />
    </div>
  );
};

export default CreateTaskCard;
1 answer
0 points
Answered by:
p_agon
409

You forgot to import .css files:

import 'react-datepicker/dist/react-datepicker.css';
import 'react-datepicker/dist/react-datepicker-cssmodules.css';
0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join