I have this array:
const disabledDays = [
{
year: selectedDay.year,
month: selectedDay.month,
day: selectedDay.day -1
}
];
and I will pass it as prop inside of a component:
<DatePicker
value={selectedDayTwo}
onChange={setSelectedDayTwo}
locale={myCustomLocale} // custom locale object
shouldHighlightWeekends
formatInputText={formatInputValueTwo} // format value
calendarTodayClassName="custom-today-day" // also this
calendarClassName="custom-calendar" // and this
colorPrimary="rgba(4, 173, 147, 255)" // added this
disabledDays={disabledDays} // here we pass them <- LOOOOK HERE
onDisabledDayError={handleDisabledSelect} // handle error
/>
FIRST PROBLEM: The problem is that disabledDays currently, with its first object, is disabling the day before of a selected day with its day: selectedDay.day -1 and in order to disable all the day before that selected Day I would have to create another object inside disabledDays and do day: selectedDay.day -2 do day: selectedDay.day -3 .... etc etc one day at the time.
SECOND PROBLEM: So the other problem is that I cannot just do: selectedDay.day -1000000 or infinitely. Also if I do follow the approach of creating an object for each day, everything is bounded by the selected day. So for instance, if the selected day is on the 1st of January doing day: selectedDay.day -1 won't work because I'd have to rememeber also to subtract also the month and the year accordingly.
THIRD PROBLEM: if i do: (following the 1st of January example) month: selectedDay.month -1, and day: selectedDay.day -1 it will take the month of December but the again the day wont work, because would be 1 of december - 1 which does not work because does not see November.
Not sure if makes sense, but seems like the only kind of strategy is applying/adding the days manually in the object. I am thinking if there is a dynamic way to do that by multiplying the objects inside the array and for each object, taking one or multiple keys, and decrease their values correspondingly with the selected day. Any clue would be really appreciated. I am using this library
Let me rephrase your problem and correct me if I am wrong.
Disable all the days before the selected day using the REACT-MODERN-CALENDAR-DATEPICKER component.
As per docs this can be achieved by setting the minimumDate for the DatePicker component.
A simple implementation is as follows
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import DatePicker from "react-modern-calendar-datepicker";
import { useEffect, useState } from "react";
export default function App() {
const [selectedDay, setSelectedDay] = useState(null);
const [minDay, setMinDay] = useState([]);
useEffect(() => {
if (selectedDay) {
setMinDay(selectedDay);
}
}, [selectedDay]);
return (
<div className="App">
<DatePicker
value={selectedDay}
onChange={setSelectedDay}
inputPlaceholder="Select a day"
shouldHighlightWeekends
minimumDate={minDay}
/>
</div>
);
}
If you select 22 September 2021 then all days before 22 September 2021 are disabled.
Reference: Minimum and Maximum Date