Tengo esta matriz:
const disabledDays = [ { year: selectedDay.year, month: selectedDay.month, day: selectedDay.day -1 } ];y lo pasaré como accesorio dentro de un componente:
<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 />PRIMER PROBLEMA: El problema es que disabledDays actualmente, con su primer objeto, está deshabilitando el día anterior de un día seleccionado con su día: selectedDay.day -1 y para deshabilitar todo el día anterior a ese Día seleccionado tendría que crear otro objeto dentro de disabledDays y hacer día: díaSeleccionado.día -2 hacer día: díaSeleccionado.día -3 .... etc etc un día a la vez.
SEGUNDO PROBLEMA: Entonces, el otro problema es que no puedo simplemente hacer: selectedDay.day -1000000 o infinitamente. Además, si sigo el enfoque de crear un objeto para cada día, todo está delimitado por el día seleccionado. Entonces, por ejemplo, si el día seleccionado es el 1 de enero, haciendo día: selectedDay.day -1 no funcionará porque tendría que recordar también restar el mes y el año en consecuencia.
TERCER PROBLEMA: si hago: (siguiendo el ejemplo del 1 de enero) mes: díaseleccionado.mes -1, y día: díaseleccionado.día -1 me tomará el mes de diciembre pero de nuevo el día no funcionará, porque sería 1 de diciembre - 1 que no funciona porque no ve noviembre.
No estoy seguro si tiene sentido, pero parece que el único tipo de estrategia es aplicar/agregar los días manualmente en el objeto. Estoy pensando si hay una forma dinámica de hacerlo multiplicando los objetos dentro de la matriz y para cada objeto, tomando una o varias claves, y disminuyendo sus valores correspondientemente con el día seleccionado. Cualquier pista sería muy apreciada. estoy usando esta biblioteca
Déjame reformular tu problema y corrígeme si me equivoco.
Deshabilite todos los días anteriores al día seleccionado usando el componente REACT-MODERN-CALENDAR-DATEPICKER.
Según los documentos, esto se puede lograr configurando la minimumDate para el componente DatePicker .
Una implementación simple es la siguiente
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> ); }Si selecciona el 22 de septiembre de 2021, todos los días anteriores al 22 de septiembre de 2021 estarán deshabilitados.
Referencia: Fecha Mínima y Máxima