Highlight dates in DatePicker BlueprintJs

Question

In my ReactJs project, I'm using DatePicker from BlueprintJS, and I have a list of dates

const dates = ['2023-05-10', '2023-05-13', '2023-05-15']

How can I highlight or make them be selected on my DatePicker by default?

I tried to use highlightedDates but seems like it's a new version of DatePicker doesn't have it anymore, also tried to use modifiers but didn't get how it works, any suggestions?

Thanks!

Answer 1

You can refer this documentation: https://blueprintjs.com/docs/#datetime/date-time-picker-modifiers

may be this code is helpful for you to show selected date in datepicker.

const dates = ['2023-05-10', '2023-05-13', '2023-05-15'];

const selectedDate = dates.reduce((obj, date) => {
  obj[date] = { selected: true };
  return obj;
}, {});

const DatepickerFunc = () => {
  const modifiers = {
    ...selectedDate,
  };

  return (
    <DatePicker
      highlightCurrentDay={true}
      modifiers={modifiers}
    />
  );
};

const DatePicker = () => {
  return (
    <div>
      <h1>Select a Date:</h1>
      <DatepickerFunc />
    </div>
  );
};