react-datepicker 版本 4.1.1。年份下拉 header 箭头未显示
react-datepicker version 4.1.1. year drop down header arrow not showing up
我们可以在文档中看到同样的问题 react-datepicker year dropdown。我知道这是特定于版本的问题,因为它在较低版本中运行良好。这个版本有解决方案吗?
() => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
showYearDropdown
dateFormatCalendar="MMMM"
yearDropdownItemNumber={15}
scrollableYearDropdown
/>
);
};
年份下拉列表在 css
中有 react-datepicker__year-dropdown
class。因此,我们可以创建自定义样式和 select 基于此 class 的年份下拉列表并添加箭头图标。自定义样式为:
.react-datepicker__year-dropdown .react-datepicker__year-option:first-child::before {
content: "B2";
position: absolute;
top: 5%;
left: 45%;
margin: auto;
}
.react-datepicker__year-dropdown::after {
content: "BC";
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
中添加样式。
我们可以在文档中看到同样的问题 react-datepicker year dropdown。我知道这是特定于版本的问题,因为它在较低版本中运行良好。这个版本有解决方案吗?
() => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
showYearDropdown
dateFormatCalendar="MMMM"
yearDropdownItemNumber={15}
scrollableYearDropdown
/>
);
};
年份下拉列表在 css
中有 react-datepicker__year-dropdown
class。因此,我们可以创建自定义样式和 select 基于此 class 的年份下拉列表并添加箭头图标。自定义样式为:
.react-datepicker__year-dropdown .react-datepicker__year-option:first-child::before {
content: "B2";
position: absolute;
top: 5%;
left: 45%;
margin: auto;
}
.react-datepicker__year-dropdown::after {
content: "BC";
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
中添加样式。