How to customize react date picker header, weekends? - css

Question

I would like to know how to customize the react datepicker, the main customizations I would like to do are when I click on the header, a grid appears to select the year and month, and if there is a way to disable and paint the weekends with a different color.
Here is my code:
function EditDatePicker(props: GridRenderEditCellParams<string>) {
const [startDate, setStartDate] = useState<Date | null>(new Date());
const openToDate = new Date('01/01/2022');
return (
<DatePicker
dateFormat="dd/MM/yyyy"
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormatCalendar={"MMM yyyy"}
minDate={subMonths(new Date(), 6)}
maxDate={addMonths(new Date(), 6)}
showMonthYearDropdown
openToDate={openToDate}
/>
);
};

Answer 1

You can check in the documentation:
Custom header
Custom weeks colors
This Custom Hook Example worked for me:
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import { getMonth, getYear } from "date-fns";
import range from "lodash/range";
import "react-datepicker/dist/react-datepicker.css";
export default function UseDatepicker(props) {
const [startDate, setStartDate] = useState(new Date());
const years = range(1990, getYear(new Date()) + 0, 1);
const months = [
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Août",
"Septembre",
"Octobre",
"Novembre",
"Décembre",
];
return (
<DatePicker
className="custom-input-style"
renderCustomHeader={({
date,
changeYear,
changeMonth,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled,
}) => (
<div
style={{
margin: 10,
display: "flex",
justifyContent: "center",
}}
>
<button
onClick={decreaseMonth}
disabled={prevMonthButtonDisabled}
>
{"<"}
</button>
<select
className="custom-select-style"
value={getYear(date)}
onChange={({ target: { value } }) =>
changeYear(value)
}
>
{years.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<select
className="custom-select-style"
value={months[getMonth(date)]}
onChange={({ target: { value } }) =>
changeMonth(months.indexOf(value))
}
>
{months.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button
onClick={increaseMonth}
disabled={nextMonthButtonDisabled}
>
{">"}
</button>
</div>
)}
selected={startDate}
onChange={(date) => setStartDate(date)}
/>
);
}
Hope this help! :)