¿Qué es la propiedad valueAsNumber?

La propiedad valueAsNumber está disponible en los elementos HTML <input>. Devuelve la representación numérica del valor del campo de entrada si el navegador pudo analizarlo como un número. De lo contrario, devuelve NaN.

Esta propiedad es especialmente útil para tipos <input type="number">, <input type="range">, <input type="date"> y <input type="time">, ya que automáticamente maneja la conversión de valores de cadena a valores numéricos o representaciones numéricas de fecha/hora.

Ejemplo de uso:

// Obtener el elemento input
const numberInput = document.getElementById('myNumberInput');

// Obtener el valor numérico
const valueAsNumber = numberInput.valueAsNumber;

// Verificar si la conversión a número fue exitosa
if (isNaN(valueAsNumber)) {
  console.log('El valor no es un número.');
} else {
  console.log('Valor numérico:', valueAsNumber);
}

Si el input tiene tipo date o time, valueAsNumber devolverá el número de milisegundos desde el inicio de la época (1 de enero de 1970, 00:00:00 UTC).

// Obtener el elemento input de tipo date
const dateInput = document.getElementById('myDateInput');

// Obtener la marca de tiempo en milisegundos
const timestamp = dateInput.valueAsNumber;

console.log('Marca de tiempo:', timestamp);

// Convertir la marca de tiempo en un objeto Date
const dateObject = new Date(timestamp);
console.log('Objeto Date:', dateObject);

Es importante destacar que valueAsNumber tiene en cuenta automáticamente las configuraciones locales de formato de números y fechas al analizar, lo que simplifica el trabajo con aplicaciones web internacionalizadas en comparación con el análisis manual de value.