Mobiscroll and HTML5 Inputs

Form controls might not be that exciting, but we come across them every day.
With the new HTML5 inputs specified in the W3C Working Draft, and browsers implementing it, working with dates and times got a whole lot easier.
Starting from 2.0 Mobiscroll supports these input types.

mobiscroll loves HTML5

Even if there are only a few browsers supporting them, it’s worth looking into.
One of the reasons these types turned up in the specs is because we capture date/datetime/time every day in our webapps. We come across these controls all the time.
Using the type=”date”, type=”time”… makes our lives as developers much more easier. You can pass in min/max values, and validation is implicit.

However… If you want to override the “native” date and time picker, or you want to provide a fallback for browsers and devices that don’t support them, you can use mobiscroll.
Or if you’re following a strict styling guideline, and want to keep the look and feel across every control, overriding the default behavior makes sense too. Using mobiscroll you can build a theme with CSS and javascript to suit your needs.

The following formats are accepted by the inputs:

date: 1996-12-19
datetime: 1990-12-31T23:59:60Z
datetime-local: 1996-12-19T16:39:57
time: 17:39:57
month: 1996-12

Prior to 2.0 the formatting needed to be specified explicitly in the dateFormat property.
With the new version this is not needed anymore. The formatting is automatically performed in the background. If mobiscroll sees that the input is supported, it will format accordingly.

Min/max and step properties are being parsed too.

type="date" min="1996-12-19" max="1997-12-19"

The web is headed in a good direction, and the input types are looking good.
Let us know what you think!

Happy Scrolling!

Start building better products
Sign up and get posts like this in your inbox. We respect your time and will send you only the good stuff!

Tags: , , ,