CODEWITHSUNDEEP
javascriptreactjsdatepickerblueprintjs
Rimad
Rimad

Reputation: 11

Highlight dates in DatePicker BlueprintJs

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!

Upvotes: 0

Views: 87

Answers (2)

JUO
JUO

Reputation: 636

For [email protected]:

import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/datetime/lib/css/blueprint-datetime.css";
import { DatePicker } from "@blueprintjs/datetime";

const bookedDays = [
  new Date("2023-12-10"),
  new Date("2023-12-13"),
  new Date("2023-12-15"),
];

const bookedStyle = {
  border: "2px solid currentColor",
  backgroundColor: "red",
  color: "white",
};

export default function App() {
  return (
    <div className="App">
      <DatePicker
        dayPickerProps={{
          modifiers: { booked: bookedDays },
          modifiersStyles: { booked: bookedStyle },
        }}
      />
    </div>
  );
}

View in codesandbox: https://codesandbox.io/embed/s6nxcx?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx

Upvotes: 0

Mitesh Dudhat
Mitesh Dudhat

Reputation: 224

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>
  );
};

Upvotes: 0

Related Questions