How to highlight the entire week when a date is picked from the Datepicker calendar using react-datepicker

To highlight the entire week when a date is picked from thereact-datepicker calendar, we can achieve this by using the highlightDates prop along with some state management to store the highlighted dates. Here’s a step-by-step approach:

1.Install react-datepicker if you haven’t already:

npm install react-datepicker

2.Import the necessary modules and styles in your React component:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { addDays, startOfWeek, endOfWeek } from 'date-fns';

3.Create a function to generate an array of dates representing the week of a given date:

const getWeekDays = (date) => {
 const start = startOfWeek(date, { weekStartsOn: 0 }); // Assuming week starts on Sunday
 const end = endOfWeek(date, { weekStartsOn: 0 });
 const days = [];
 for (let i = 0; i <= 6; i++) {
  days.push(addDays(start, i));
 }
 return days;
};

4.Set up the state to manage the selected date and highlighted dates:

const [selectedDate, setSelectedDate] = useState(null);
const [highlightedDates, setHighlightedDates] = useState([]);

5.Handle the date selection and update the highlighted dates:

const handleDateChange = (date) => {
 setSelectedDate(date);
 const weekDays = getWeekDays(date);
 setHighlightedDates(weekDays);
};

6.Render the DatePicker with the highlightDates prop:

<DatePicker
  selected={selectedDate}
  onChange={handleDateChange}
  highlightDates={highlightedDates.map(day => ({
    "react-datepicker__day--highlighted": day
  }))}
  inline
/>

Here is the complete example:

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { addDays, startOfWeek, endOfWeek } from 'date-fns';


const getWeekDays = (date) => {
  const start = startOfWeek(date, { weekStartsOn: 0 }); // Assuming week starts on Sunday
  const end = endOfWeek(date, { weekStartsOn: 0 });
  const days = [];
  for (let i = 0; i <= 6; i++) {
    days.push(addDays(start, i));
  }
  return days;
};


const WeekHighlighter = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const [highlightedDates, setHighlightedDates] = useState([]);


  const handleDateChange = (date) => {
    setSelectedDate(date);
    const weekDays = getWeekDays(date);
    setHighlightedDates(weekDays);
  };


  return (
    <DatePicker
      selected={selectedDate}
      onChange={handleDateChange}
      highlightDates={highlightedDates.map(day => ({
        "react-datepicker__day--highlighted": day
      }))}
      inline
    />
  );
};


export default WeekHighlighter;

This code will highlight the entire week in the react-datepicker calendar when a date is picked. The highlightDates prop uses a CSS class to highlight the dates. You can customize the highlighted style by adding custom CSS for the react-datepicker__day--highlighted class.