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: , , ,

  • phila

    I know it’s not about HTML, but if you go to, it comes up with the IIS7 installation screen – whoever your host is needs to do their job properly!

    • kovlex

      Thanks for reporting it! It is fixed now.

  • logaraja

    how to avoid showing date modal dialog, while clicking the input text box. it needs to be show only when user clicks the show button.

  • me

    how can I set 24h instead of AM/PM

  • DaveI

    Can’t believe 4 comments and nobody mentions what an incredible job you have done. It takes a lot of effort and design for a consumer to think “Why can’t everything be this easy?”

    • kovlex

      It is our goal with mobiscroll 🙂 Happy to hear you are saying that!