What is the property valueAsNumber?

The valueAsNumber property is available on HTML elements <input>. It returns the numeric representation of the input field's value if the browser was able to parse it as a number. Otherwise, it returns NaN.

This property is especially useful for <input type="number">, <input type="range">, <input type="date">, and <input type="time"> types, as it automatically handles the conversion of string values into numeric or date/time representations.

Example usage:

// Get the input element
const numberInput = document.getElementById('myNumberInput');

// Get the numeric value
const valueAsNumber = numberInput.valueAsNumber;

// Check if the conversion to number was successful
if (isNaN(valueAsNumber)) {
  console.log('The value is not a number.');
} else {
  console.log('Numeric value:', valueAsNumber);
}

If the input has type date or time, valueAsNumber will return the number of milliseconds since the epoch (January 1, 1970, 00:00:00 UTC).

// Get the input element with type date
const dateInput = document.getElementById('myDateInput');

// Get the timestamp in milliseconds
const timestamp = dateInput.valueAsNumber;

console.log('Timestamp:', timestamp);

// Convert timestamp to Date object
const dateObject = new Date(timestamp);
console.log('Date object:', dateObject);

It is important to note that valueAsNumber automatically accounts for local number and date formatting settings during parsing, which simplifies working with internationalized web applications compared to manual parsing of value.