How to select mulitple highlight dates in React DatePicker

Question

I am using plugin react-datepicker . I am trying to highlight multiple dates from array, but now, just only date first array ( date: "04/16/2021" ) have been a successful highlight. how to select highlight multiple dates from data array?.

for example

I have code:

codesandbox.

Please tell me, my error code

Answer 1

Replace this

  return (
    <div className="white-box p-20">
      {(() => {
        for (let index = 0; index < array.length; index++) {
          let highlight = subDays(new Date(`${array[index].date}`), 0);
          console.log(highlight);
          return (
            <DatePicker
              locale="id"
              renderCustomHeader={({
                date,
                changeYear,
                changeMonth,
                decreaseMonth,
                increaseMonth,
                prevMonthButtonDisabled,
                nextMonthButtonDisabled
              }) => (
                <div
                  style={{
                    marginBottom: "20px",
                    display: "flex",
                    justifyContent: "center"
                  }}
                >
                  <button
                    onClick={decreaseMonth}
                    disabled={prevMonthButtonDisabled}
                    className="btn-left"
                  >
                    <img src="https://cutt.ly/fvNPwH5" />
                  </button>
                  <select
                    value={months[date.getMonth()]}
                    onChange={({ target: { value } }) =>
                      changeMonth(months.indexOf(value))
                    }
                    className="mr-2"
                  >
                    {months.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </select>
                  <select
                    value={date.getFullYear()}
                    onChange={({ target: { value } }) => changeYear(value)}
                  >
                    {years.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </select>
                  <button
                    onClick={increaseMonth}
                    disabled={nextMonthButtonDisabled}
                    className="btn-right"
                  >
                    <img src="https://cutt.ly/fvNPwH5" />
                  </button>
                </div>
              )}
              selected={startDate}
              dateFormat="MM/dd/yyyy"
              highlightDates={[highlight]}
              inline
            />
          );
        }
      })()}
    </div>
  );

with this

  let highlight = array.map(date => new Date(date.date));

  return (
    <div className="white-box p-20">
      <DatePicker
        locale="id"
        renderCustomHeader={({
          date,
          changeYear,
          changeMonth,
          decreaseMonth,
          increaseMonth,
          prevMonthButtonDisabled,
          nextMonthButtonDisabled
        }) => (
          <div
            style={{
              marginBottom: "20px",
              display: "flex",
              justifyContent: "center"
            }}
          >
            <button
              onClick={decreaseMonth}
              disabled={prevMonthButtonDisabled}
              className="btn-left"
            >
              <img src="https://cutt.ly/fvNPwH5" />
            </button>
            <select
              value={months[date.getMonth()]}
              onChange={({ target: { value } }) =>
                changeMonth(months.indexOf(value))
              }
              className="mr-2"
            >
              {months.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
            <select
              value={date.getFullYear()}
              onChange={({ target: { value } }) => changeYear(value)}
            >
              {years.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
            </select>
            <button
              onClick={increaseMonth}
              disabled={nextMonthButtonDisabled}
              className="btn-right"
            >
              <img src="https://cutt.ly/fvNPwH5" />
            </button>
          </div>
        )}
        selected={startDate}
        dateFormat="MM/dd/yyyy"
        highlightDates={highlight}
        inline
      />
    </div>
  );

Answer 2

Actually In your code is was couple of issues

1. Your code was inside the loop and inside that loop you was doing return means code will be executed one time so I have removed that like as follows

for (let index = 0; index < array.length; index++) {
    highlight.push(subDays(new Date(`${array[index].date}`), 0));
}

2. highlight was not array type so every time highlight value was changing so I have made that array and pushing data into array

let highlight =[];

for (let index = 0; index < array.length; index++) {
    highlight.push(subDays(new Date(`${array[index].date}`), 0));
}

3. last thing which I changed that is date picker hightlights code

highlightDates={highlight}

Complete code is here: https://codesandbox.io/embed/laughing-platform-0mur1?fontsize=14&hidenavigation=1&theme=dark

  return (
    <div className="white-box p-20">
      {(() => {
        let highlight =[];

        for (let index = 0; index < array.length; index++) {
          highlight.push(subDays(new Date(`${array[index].date}`), 0));
        }
        return (
          <DatePicker
            locale="id"
            renderCustomHeader={({
              date,
              changeYear,
              changeMonth,
              decreaseMonth,
              increaseMonth,
              prevMonthButtonDisabled,
              nextMonthButtonDisabled
            }) => (
                <div
                  style={{
                    marginBottom: "20px",
                    display: "flex",
                    justifyContent: "center"
                  }}
                >
                  <button
                    onClick={decreaseMonth}
                    disabled={prevMonthButtonDisabled}
                    className="btn-left"
                  >
                    <img src="https://cutt.ly/fvNPwH5" />
                  </button>
                  <select
                    value={months[date.getMonth()]}
                    onChange={({ target: { value } }) =>
                      changeMonth(months.indexOf(value))
                    }
                    className="mr-2"
                  >
                    {months.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </select>
                  <select
                    value={date.getFullYear()}
                    onChange={({ target: { value } }) => changeYear(value)}
                  >
                    {years.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </select>
                  <button
                    onClick={increaseMonth}
                    disabled={nextMonthButtonDisabled}
                    className="btn-right"
                  >
                    <img src="https://cutt.ly/fvNPwH5" />
                  </button>
                </div>
              )}
            selected={startDate}
            dateFormat="MM/dd/yyyy"
            highlightDates={highlight}
            inline
          />
        );
      })()}
    </div>
  );
}

export default Dates;