Cómo obtener fechas y números de un input HTML
Introducción
Aún recuerdo los días en los que no existían etiquetas <input> especializadas. Tenías los genéricos de <input type="text">, <input type="button">, <input type="file">, <input type="hidden"> y algún otro. Pero, básicamente, las validaciones se realizaban mediante JavaScript en un <input type="text">.
Desde hace un tiempo contamos con muchos otros especializados como <input type="color"> para hacer aparecer un color picker, <input type="date"> para mostrar un calendario, <input type="number"> para incrementar o decrementar números, etc.
Y es justo sobre estos dos últimos (date y number), de los que vamos a comentar una pequeña funcionalidad que tal vez no conozcas.
Obteniendo el valor del campo
Para acceder al valor del <input>, basta con consultar la propiedad inputElement.value. Ésta devuelve el valor actual como un string. Si el valor aún no se hubiera especificado, devuelve también un string, en este caso vacío ('').
function extractValue(element) {
// Devolvemos la propiedad "value"
return element.value
}
/* Código de la demo */
function updateElements() {
const date = extractValue(document.getElementById('date-input'))
document.getElementById('date-value').textContent = date
document.getElementById('date-type').textContent = typeof date
const number = extractValue(document.getElementById('number-input'))
document.getElementById('number-value').textContent = number
document.getElementById('number-type').textContent = typeof number
}
updateElements()
document
.getElementById('date-input')
.addEventListener('change', updateElements)
document
.getElementById('number-input')
.addEventListener('change', updateElements)El problema de este código es que JavaScript cuenta con objetos Date para manipulación de fechas y el tipo primitivo Number. Así pues si tenemos nuestro valor como string primero deberemos realizar conversiones tales como new Date(stringValue) en el caso de fechas, o Number(stringValue) / parseInt(stringValue, 10) en el caso de números.
Recuerda que si no realizas las conversiones y tratas de sumar dos cadenas de texto como, por ejemplo, '2' + '2', el resultado no es 4, si no 22.
Podemos evitar esta conversión simplemente utilizando un par de propiedades que ya llevan unos años entre nosotros y tal vez no conozcas.
Obteniendo el valor del campo como fecha o número
En el caso de los <input type="date"> contamos con la propiedad inputElement.valueAsDate.
En el caso de <input type="number">, la propiedad se llama inputElement.valueAsNumber.
¿Fácil verdad? Veámos un ejemplo.
function extractValue(element) {
// Devolvemos la propiedad "valueAsDate", "valueAsNumber" o "value" dependiendo del input
if (element.type === 'date') {
return element.valueAsDate
} else if (element.type === 'number') {
return element.valueAsNumber
} else {
return element.value
}
}
/* Código de la demo */
function updateElements() {
const date = extractValue(document.getElementById('date-input'))
document.getElementById('date-value').textContent = date
document.getElementById('date-type').textContent = typeof date
const number = extractValue(document.getElementById('number-input'))
document.getElementById('number-value').textContent = number
document.getElementById('number-type').textContent = typeof number
}
updateElements()
document
.getElementById('date-input')
.addEventListener('change', updateElements)
document
.getElementById('number-input')
.addEventListener('change', updateElements)Ahora nuestra fecha es de tipo object y por lo tanto acepta manipulaciones tales como date.getTime() o date.toISOString().
En el caso del <input type="number"> nuestro valor tendrá el tipo number, así que ya estamos listos para realizar operaciones sobre los números sin miedo a que se nos olvide la conversión previa.
Cuando el valor del <input type="number"> aún no haya sido especificado, la propiedad inputElement.valueAsNumber tendrá el valor de NaN.
¿Recuerdas cuál es el tipo de NaN? Exacto, typeof NaN // 'number'.
Por lo tanto, ten cuidado si el valor aún no existe en el <input> y realiza una comprobación mediante if (!isNaN(number)) {}.
Asignando un valor al campo
Por último cabe destacar que estas propiedades son tanto getters como setters.
Es decir, podemos asignar valores a estas propiedades y nuestro <input> cambiará de valor.
Por ejemplo, podemos asignar inputElement.valueAsDate = new Date() y nuestro <input type="date"> actualizará su valor de fecha.
En el caso de los <input type="number"> podemos hacer exactamente lo mismo: inputElement.valueAsNumber = totalIncome.
¿Sabías que esta propiedad existe desde los tiempos de Internet Explorer?
Puedes apoyarme para que pueda dedicar aún más tiempo a escribir artículos y tener recursos para crear nuevos proyectos. ¡Gracias!