Made in Builder

Made in Builder.io

Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

Web Development

A Better Way to Work With Number and Date Inputs in JavaScript

January 16, 2023

Written By Steve Sewell

valueAsNumber

You may have written some code like this before:

This is fine and dandy, but there is actually a better way we can be reading the number value.

I’m talking about this part:

That’s right. Since all the way back in the days of IE10 we’ve had a better way to get and set number values:

So a nicer solution to the above could instead look like:

And of course, you don’t need React to use this. This is just standard JavaScript that works with any framework.

You could likewise query a DOM node and use it as well:

And, importantly, you can write to it as well!

A minor gotcha

The type of valuseAsNumber will always be a number. So this means that if there is no current value set for the input, you will get NaN as the value.

And don’t forget…

Yeah, one of those little JavaScript fun parts. So be sure to check if your valueAsNumber is NaN before writing it to places that expect actual numbers

valueAsDate

But wait, there’s more!

For date inputs, we also get a handy valueAsDate property as well:

Beautiful.

And for those who don’t use React (or Qwik, which looks like React but has much better performance), you can of course do this with any plain ole HTML and JavaScript too:

And, as expected, you can write to it as well

No gotchas this time

Thankfully, for valueAsDate, when the input is empty, we simply get null.

So you can simply check for if the value is truthy

Browser Support

Yeah, this is not a new thing at all. Even if this may be your first time learning about these properties, they’ve existed for many years, even since the dinosaur days of IE 10.

Screenshot of the browser support table from the MDN page linked directly below this image

Source: MDN

Conclusion

Now that we know how, we actually treat number and date inputs as proper number and date values, using the valueAsNumber and valueAsDate properties, respectively.

Visually build with your components

Builder.io is a Visual CMS that let's you drag and drop to create content on your site visually, using your components.

Stop drowning in a backlog of requests - build with your whole team instead.

Try it out
Learn more

Share

Twitter
LinkedIn
Facebook

Continue Reading
Web Performance14 MIN
Optimal Images in HTML
WRITTEN BYSteve Sewell
January 26, 2023
web development9 MIN
The Tailwind CSS Drama Your Users Don't Care About
WRITTEN BYYoav Ganbar
January 25, 2023
Web Development9 MIN
Fast and Light Relative Time Strings in JS
WRITTEN BYSteve Sewell
January 24, 2023

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

PRODUCT

Features

Pricing

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

INTEGRATIONS

React

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

Shopify

All Integrations

Security

Privacy Policy

Terms of Service

By clicking “Subscribe”, I agree to Builder.io's Terms of Service and Privacy Policy.