反应日期选择器版本 4.1.1年份下拉标题箭头未显示

如何解决反应日期选择器版本 4.1.1年份下拉标题箭头未显示

我们可以在文档 react-datepicker year dropdown 中看到同样的问题。我知道这是版本特定的问题，因为它在较低版本中运行良好。这个版本有什么解决方案吗？

() => {
  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 中添加样式。