How to get dates and numbers from an HTML input

Introduction

I still remember the days when there were no specialized <input> tags. You had the generic <input type="text">, <input type="button">, <input type="file">, <input type="hidden"> and some other. But basically, the validations were done via JavaScript in an <input type="text">.

For some time now we have had many other specialized such as <input type="color"> to make a color picker appear, <input type="date"> to display a calendar, <input type="number"> to increment or decrement numbers, etc.

And it is just about these last two (date and number), of which we are going to comment on a small functionality that you may not know about.

Getting the value of the field

To access the value of the <input>, just access the inputElement.value property. It returns the current value as a string. If the value has not yet been specified, it also returns a string, in this case empty ('').

function extractValue(element) {
  // We return the property "value"

  return element.value
}

/* Demo code */

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)

The problem with this code is that JavaScript has Date objects for date manipulation and the primitive type Number. So if we have our value as string we must first perform conversions such as new Date(stringValue) in the case of dates, or Number(stringValue) / parseInt(stringValue, 10) in the case of numbers.

2 + 2

Remember that if you do not perform the conversions and try to add two strings together like, for example, '2' + '2', the result is not 4, but 22.

We can avoid this conversion simply by using a couple of properties that have been around for a few years now and you may not be aware of.

Getting the value of the field as a date or number

In the case of the <input type="date"> we have the inputElement.valueAsDate property.

In the case of <input type="number">, the property is called inputElement.valueAsNumber.

Easy, isn't it? Let's see an example.

function extractValue(element) {
  // We return the property "valueAsDate", "valueAsNumber" or "value" depending on the input

  if (element.type === 'date') {
    return element.valueAsDate
  } else if (element.type === 'number') {
    return element.valueAsNumber
  } else {
    return element.value
  }
}

/* Demo code */

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)

Now our date is of type object and therefore accepts manipulations such as date.getTime() or date.toISOString().

In the case of <input type="number"> our value will have type number, so we are ready to perform operations on numbers without fear of forgetting the previous conversion.

Not-A-Number

When the value of the <input type="number"> has not yet been setted, the inputElement.valueAsNumber property will have the value of NaN.

Do you remember what the type of NaN is? Exactly, typeof NaN // 'number'.

So, be careful if the value does not yet exist in the <input> and perform a check via if (!isNaN(number)) {}.

Assigning a value to the field

Finally it should be noted that these properties are both getters and setters.

That is, we can assign values to these properties and our <input> will change its value.

For example, we can assign inputElement.valueAsDate = new Date() and our <input type="date"> will update its date value.

In the case of the <input type="number"> we can do exactly the same: inputElement.valueAsNumber = totalIncome.

Did you know that this property has been around since the days of Internet Explorer?

You can support me so that I can dedicate even more time to writing articles and have resources to create new projects. Thank you!