Even same issue we can see in documentation react-datepicker year dropdown. I know it's version specific issue as it's working fine in lower version. Any solution for this version?
() => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
showYearDropdown
dateFormatCalendar="MMMM"
yearDropdownItemNumber={15}
scrollableYearDropdown
/>
);
};
Year drop down have react-datepicker__year-dropdown class in css. So we can create a custom style and select the year dropdown based on this class and add the arrow icon. Custom styles will be:
.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%;
}
Assume DatePicker component's code is same as bellow:
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
/>
);
}
We add our styles in styles.css.
