Tengo tres entradas. Uno es la entrada para obtener la fecha html. La segunda es la entrada que recibe la primera vez en formato de 24 horas. (ej: HH:00) Y la última es una entrada que recibe mm en formato de 24 horas. (por ejemplo, 23:MM) Para su información, la primera entrada obtiene un valor llamado prop.editTodoAnswer.inception.
Tengo que combinar todas estas entradas en una y hacer la siguiente salida. "2022-12-01T00:00:00"
¿Cómo podemos expresar el valor según el formato? El siguiente es mi código
const inceptionValues = { date: props.editTodoAnswer.inception, fristTime: '00', secondeTime: '00', } const [inceptionTest, setInceptionTest] = useState(inceptionValues); const handleChangeInception = (e: any) => { const newInception = e.target.value; setInceptionTest(newInception) } -------------------------- <form onChange={e => handleChangeInception(e)}> <input style={{margin:'0 5px 0 0'}} type="date" name="date" defaultValue={inceptionValues.date}/> <input style={{border:'none'}} type="number" name="fristTime" min="0" max="23" placeholder="23"/>: <input style={{border:'none'}} type="number" name="secondeTime" min="0" max="59" placeholder="00"/> </form>const dateString = `${props.editTodoAnswer.inception}T${inceptionValues.firstTime.padStart(2,'0')}:${inceptionValues.secondeTime.padStart(2,'0')}:00` y creo que props.editTodoAnswer.inception puede no estar en inceptionValues solo use props.editTodoAnswer.inception
No está claro dónde desea que se emita la cadena de fecha... Así que supuse que lo deseaba en el estado.
Hay tres casos para construir la cadena, dependiendo de qué entrada cambió. Además, debe agregar los ceros iniciales.
Le sugiero que aplique el controlador de cambios en cada entrada en lugar del formulario. Esto permitirá que cada entrada se actualice con el valor de estado en cada representación, lo que permitirá que se muestren los ceros iniciales.
Echa un vistazo a los comentarios a lo largo del código.
function CustomDate() { // Default state values const inceptionValues = { date: "2022-02-20", hours: "00", minutes: "00", dateString: "2022-02-20T00:00:00" }; // State hook const [inceptionTest, setInceptionTest] = React.useState(inceptionValues); // Add the leading zeros when necessary const leadZero = (n) => { return parseInt(n) < 10 ? `0${n}` : n; }; // Change handler for the 3 inputs // so e.target can be any of the 3 inputs const handleChangeInception = (e) => { let value = e.target.value; let newdateString; // Build the date string if (e.target.name === "date") { newdateString = `${value}T${inceptionTest.hours}:${inceptionTest.minutes}:00`; } if (e.target.name === "hours") { value = leadZero(value); newdateString = `${inceptionTest.date}T${value}:${inceptionTest.minutes}:00`; } if (e.target.name === "minutes") { value = leadZero(value); newdateString = `${inceptionTest.date}T${inceptionTest.hours}:${value}:00`; } // Prepare the object to set the new state let newState = { ...inceptionTest, [e.target.name]: value, dateString: newdateString }; console.log(newState); setInceptionTest(newState); }; // Render return ( <form> <input style={{ margin: "0 5px 0 0" }} type="date" name="date" value={inceptionTest.date} onChange={(e) => handleChangeInception(e)} /> <input style={{ border: "none" }} type="number" name="hours" min="0" max="23" placeholder="23" value={inceptionTest.hours} onChange={(e) => handleChangeInception(e)} /> : <input style={{ border: "none" }} type="number" name="minutes" min="0" max="59" placeholder="00" value={inceptionTest.minutes} onChange={(e) => handleChangeInception(e)} /> </form> ); } class App extends React.Component { render() { return ( <div className="App"> <h1>Custom date</h1> <CustomDate /> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <div id="root"></div>