React - DatePicker popover doesn't open properly

0 points
Asked by:

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>
        onChange={(date) => setStartDate(date)}

export default CreateTaskCard;
1 answer
0 points
Answered by:

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
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
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.

❤️💻 🙂