CODEWITHSUNDEEP
javascriptreactjsstorybook
HangoutGuy
HangoutGuy

Reputation: 17

How do I format ReactJs date picker to look normal?

import React, { useState } from "react";
import DatePicker from "react-datepicker";

function GenericCalendarRange() {
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    return (
        <>
            <h4 className="datepicker__title"> From </h4>
            <DatePicker
                selected={startDate}
                onChange={(date) => setStartDate(date)}
                selectsStart
                startDate={startDate}
                endDate={endDate}
            />
            <h4 className="datepicker__title"> To </h4>
            <DatePicker
                selected={endDate}
                onChange={(date) => setEndDate(date)}
                selectsEnd
                startDate={startDate}
                endDate={endDate}
                minDate={startDate}
            />
        </>
    );
}

export default GenericCalendarRange;

My code ends up looking quite odd in the storybook story. Storybook output. Am I missing something? Is there a formatting mistake going on or not being implemented correctly?

Upvotes: 0

Views: 38

Answers (2)

Thibaud Arnault
Thibaud Arnault

Reputation: 1435

You need to import the CSS file of react-datepicker with:

import "react-datepicker/dist/react-datepicker.css";

cf: https://github.com/Hacker0x01/react-datepicker#installation

Upvotes: 1

Victorien Fischer
Victorien Fischer

Reputation: 33

Have you, at some point in your code, imported the Datepicker's CSS? The documentation says:

You will also need to require the CSS file from this package (or provide your own).

Upvotes: 1

Related Questions