I have an array of dates in "MM/DD/YYYY" format. But passing this array via the hightlightDates prop to react-datepicker is not highlighting the days on the calendar. How can I accomplish this?
<DatePicker
showIcon
selected={startDate}
customInput={<CustomInput />}
onChange={(date) => setStartDate(date)}
minDate={new Date()}
highlightDates={[datesWithEvent]}
wrapperClassName="calendar-wrapper"
calendarClassName="calendar"
className="datepicker"
/>
DatePicker expects an array of dates. You are passing an array or arrays of dates. Remove the '[', ']' should work.
highlightDates={datesWithEvent}
As can be read inside the documentation here you need to pass an array of Date objects rather than strings to the highlightDates prop. The example is using the subDays method from date-fns.
export default function MyDatePicker(): JSX.Element {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
highlightDates={[subDays(new Date(), 7), addDays(new Date(), 7)]}
placeholderText="This highlights a week ago and a week from today"
/>
);
};
Please note that you should do some research on your own before posting to StackOverflow. A look at the library documentation would've probably sufficed.