Блог

Даже та же проблема, которую мы видим в раскрывающемся списке react-datepicker year. Я знаю, что это проблема конкретной версии, так как в более поздней версии она работает нормально. Есть какое-нибудь решение для этой версии?

 () => {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showYearDropdown
      dateFormatCalendar="MMMM"
      yearDropdownItemNumber={15}
      scrollableYearDropdown
    />
  );
};
 

Год учебы у react-datepicker__year-dropdown класса в css . Таким образом, мы можем создать собственный стиль и выбрать раскрывающийся список » Год » на основе этого класса и добавить значок со стрелкой. Пользовательские стили будут:

 .react-datepicker__year-dropdown .react-datepicker__year-option:first-child::before {
  content: "25B2";
  position: absolute;
  top: 5%;
  left: 45%;
  margin: auto;
}

.react-datepicker__year-dropdown::after {
  content: "25BC";
  display: block;
  position: relative;
  bottom: 15%;
}
 

Предположим DatePicker , что код компонента такой же, как показано ниже:

 import { useState } from "react";
import "./styles.css";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={(date) => setStartDate(date)}
      showYearDropdown
      dateFormatCalendar="MMMM"
      yearDropdownItemNumber={15}
      scrollableYearDropdown
    />
  );
}
 

Мы добавляем наши стили styles.css .