react-datetime dropdown has missing styles(css)

Question

I am making a calendar app that whenever someone clicks the input field, it should appear as a dropdown menu and in that dropwdown menu it should let me select the fields. The styles are missing for the dropdown.

This is how it should appear:

This is how it appears now:

Here is the code where I have my calendar:

import React, {useState} from 'react'
import Modal from "react-modal"
import Datetime from 'react-datetime';


function AddEvent({isOpen, onClose, onEventAdded}) {
    const [title, setTitle] = useState("")
    const [start, setStart] = useState(new Date())
    const [end, setEnd] = useState(new Date())

    const onSubmit = (e) => {
        e.preventDefault()

        onEventAdded({
            title,
            start,
            end
        })
        onClose()
    }

    return (
            <Modal isOpen={isOpen} onRequestClose={onClose}>
                <form onSubmit={onSubmit}>
                    <input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
                    <div>
                        <label>Start Date</label>
                        <Datetime value={start} onChange={date => setStart(date)} />
                    </div>
                    <div>
                        <label>End Date</label>
                        <Datetime value={end} onChange={date => setEnd(date)} />
                    </div>
                    <button>Add Event</button>
                </form>
            </Modal>
    )
}

export default AddEvent

score 1 · Accepted Answer · answered Aug 28 '21 at 21:15

You need to import the corresponding css for the react-datetime library for the DatePicker to have the correct style.

This should fix it:

import "react-datetime/css/react-datetime.css";

In case you run into trouble I've replicated your issue in this codesandbox where you can see it working https://codesandbox.io/s/quiet-sound-l6t6h?file=/src/Test.tsx:113-161

Additional info, it's also explained here https://www.npmjs.com/package/react-datetime (worth reading)

react-datetime dropdown has missing styles(css)

1 Answers1