Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Highlight dates on react-datepicker

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"
/>
Tags:

2

Answers


  1. 0

    DatePicker expects an array of dates. You are passing an array or arrays of dates. Remove the ‘[‘, ‘]’ should work.

      highlightDates={datesWithEvent}
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search