Actualmente estoy tratando de tener botones que cambien la finalización de una tarea pendiente cuando se hace clic, pero solo quiero permitir que se haga clic en el botón para los días anteriores y el actual.
Por ejemplo, digamos que es miércoles, entonces quiero que mi botón esté habilitado para lunes, martes y miércoles, pero no para días posteriores.
En mi API no pude enviar los días, solo la identificación del día. Entonces Sun: 1 ... Sat:7 , y no puedo pensar en una manera de hacerlo.
Este es un fragmento de código para hoy domingo, por lo que el botón debe estar habilitado, pero está deshabilitado por el resto de los días, es solo una idea de lo que estoy tratando de lograr.
<div key={day.id}> {habit.id === day.habitId && ( <> {firstDay === "Sun" && day.id === 1 ? <form onSubmit={onSubmit}> {!day.isCompleted ? <button type="submit" onClick={() => {setHandleChange([day.id, day.isCompleted]); setCompletion(!day.isCompleted)}}>[]</button> : <button style={{ color: habit.color }} type="submit" onClick={() => setHandleChange([day.id, day.isCompleted])}>[]</button> } </form> : <button disabled type="submit" onClick={(e) => { setHandleChange([day.id, day.isCompleted]); setCompletion(e.target.value) }}>[]</button> } </> )} </div> firstDay se obtiene manipulando new Date por lo que es una variable dinámica. ¿Cómo puedo hacer que esta idea sea dinámica, de modo que si day.id === 7 , se pueda hacer clic en todos los botones, si day.id === 1 , solo se pueda hacer clic en Sun , si day.id === 3 entonces se puede hacer clic en Sun, Mon and Tue tue pero no en el resto?
Puede mantener una matriz de nombres de días y luego usar getDay para obtener el índice de "hoy". Luego itere sobre la matriz de días, y si el índice del map actual es mayor que el índice de "hoy", deshabilite el botón.
function Example() { const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const today = new Date().getDay(); function handleClick(e) { const { dataset: { day } } = e.target; console.log(day); } function isDisabled(i) { return i > today; } return ( <div> {days.map((day, i) => { return ( <button data-day={day} type="button" onClick={handleClick} disabled={isDisabled(i)} >{day} </button> ) })} </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>