0
311
Vistas<input type="datetime-local" /> no muestra la HORA como se esperaba
He estado tratando de mostrar una fecha y hora en un cuadro de entrada y, según el fragmento de código a continuación, uno pensaría que la entrada de texto y la entrada local de fecha y hora se mostrarían a la misma hora. Pero, por desgracia, no lo hacen.
¿Alguien puede decirme por qué y cómo puedo hacer que se comporte como "debería"?
Imagen de como se comporta en varios de los equipos que he probado.
const datetime = document.getElementById('datetime'); const expected = document.getElementById('expected'); const date = new Date(); date.setMilliseconds(0) datetime.valueAsNumber = date; expected.value = date.toLocaleString(); <h1> Datetime-local bug: </h1> <input type="datetime-local" id="datetime" /> <input type="text" id="expected" />1 Respuestas
Responde la pregunta0
Hay una serie de inconsistencias con la forma en que los navegadores procesan y analizan el valor de input type="datetime-local" . En general, es mejor usar controles separados para la fecha y la hora y combinarlos detrás de escena según sea necesario (quizás junto con la información de la zona horaria para un seguimiento preciso del horario de verano).
Sin embargo, para esta pregunta, la propiedad valueAsNumber es de solo lectura según la especificación. Algunos navegadores han implementado esto de manera diferente, ya que tienen la propiedad valueAsDate , que debería poder escribirse.
Ejecute el siguiente fragmento en la versión de Edge 95.0.1020.53 (compilación oficial) (64 bits) en Windows 10 y es probable que arroje un error con respecto a la entrada que no admite valores de fecha.
const datetime = document.getElementById('datetime'); const expected = document.getElementById('expected'); const date = new Date(); date.setMilliseconds(0) datetime.valueAsDate = date; expected.value = date.toLocaleString(); <h1> Datetime-local bug: </h1> <input type="datetime-local" id="datetime" /> <input type="text" id="expected" /> Por lo tanto, sugiero establecer la propiedad de value en un formato ISO 8601 abreviado (sin fracciones de segundo y sin zona horaria).
const datetime = document.getElementById('datetime'); const expected = document.getElementById('expected'); const date = new Date(); date.setMilliseconds(0) datetime.value = date.toISOString().slice(0, 19); console.log(datetime.value); expected.value = date.toLocaleString(); <h1> Datetime-local bug: </h1> <input type="datetime-local" id="datetime" /> <input type="text" id="expected" /> Tenga en cuenta que los formatos no serán necesariamente los mismos. Esto se debe a que input type="datetime-local" usa la configuración regional personalizada del sistema operativo, mientras que Date.prototype.toLocaleString no usa esa configuración. Por ejemplo, prefiero usar el formato aaaa-MM-dd HH:mm:ss (por ejemplo, 2021-11-16 17:46:33) para fechas y horas, pero mi idioma (lo que algunos están decididos a llamar "locale" ) está configurado como "en-US", lo que significa que toLocaleString quiere formatear en formato MM/dd/yyyy h:mm:ss aa (p. ej., 16/11/2021 12:46:33 p. m.).