Блог

Главная - Вопросы по программированию - react-datepicker неправильно отображает дату

react-datepicker неправильно отображает дату

#javascript #reactjs #react-datepicker

Вопрос:

Я хочу использовать react-datepicker с react, но я не знаю, почему неправильно отображается календарь, и я не знаю, почему он не работает и как я могу это исправить..

Вот Мой Код

 import DatePicker from "react-datepicker";
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";

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


function ProfileDetails() {
  const [startDate, setStartDate] = useState(
    setHours(setMinutes(new Date(), 30), 16)
  );

  return (
    <>
          <DatePicker
            selected={startDate}
            onChange={(date) => setStartDate(date)}
            showTimeSelect
            includeTimes={[
              setHours(setMinutes(new Date(), 0), 17),
              setHours(setMinutes(new Date(), 30), 18),
              setHours(setMinutes(new Date(), 30), 19),
              setHours(setMinutes(new Date(), 30), 17),
            ]}
            dateFormat="MMMM d, yyyy h:mm aa"
            inline
          />
    </>
)
}

и на нем просто отображаются даты в направлении столбца, как на этом изображении..

Изображение Выходного Сигнала

Комментарии:

1. Я бы заподозрил, что react-datepicker.css как — то не загружено-используйте инструмент разработки, чтобы проверить, присутствуют ли ожидаемые стили.

2. я проверил, но, как вы сказали, он не загружен, и я не знаю, почему? 🙁

3. Это зависит от того, как проект построен (webpack?) и обслуживается. Необходимо опубликовать структуру каталогов вашего проекта и файл конфигурации webpack (или любой другой конструктор, который вы используете).

4. да, я использую webpack, и я использую css module , я имею в виду, что если я хочу использовать стили css, я буду импортировать так import styles from '..PATH' , и когда я хочу установить имя класса «btn1» для кнопки, которую я должен использовать <button className={styles.btn1}> HELLO WORLD </button> .. я не знаю, создает ли это проблему

Ответ №1:

Определенно есть какая-то проблема с импортом css или загрузчиками CSS. Когда я копирую ваш код, он работает правильно. Но когда я комментирую импорт css, он ведет себя точно так же, как вы упомянули выше.

Комментарии:

1. я использую CSS MODULE , я имею в виду, что если я хочу установить имя класса btn1 для кнопки, я должен использовать ` импорт стилей из «… ПУТЬ»` затем для добавления имени класса <button className={styles.btn1}> HELLO WORLD </button> подробнее об этом, есть ли какие-либо проблемы с использованием этого модуля? ( create-react-app.dev/документы/добавление css-модулей-таблицы стилей )

Метки: