javascript - 如何格式化 ReactJs 日期选择器以使其看起来正常？

Question

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;

我的代码在故事书故事中看起来很奇怪。故事书输出。我错过了什么吗？是否存在格式错误或未正确实施？

标签： javascriptreactjsstorybook

Answer 1

你需要导入 react-datepicker 的 CSS 文件：

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

参考：https ://github.com/Hacker0x01/react-datepicker#installation