May 23, 2016
  • All
  • Ionic
  • Ionic 2

Ionic 2: Fixing Date Inputs for the Mobile Web

Adam Bradley

pickers-header-img

Remember how easy it was to select a specific date from an HTML input? Or when you had that great experience with JavaScript’s Date object? Or that large project where you had no troubles dealing with timezones? Me either. I think the best way to describe the experience comes from a Stack Overflow comment stating, “Handling dates with Javascript is like trying to get a cat into a tub of water.”

Don’t get me wrong–I absolutely love JavaScript and HTML. And to be fair, handling datetime values within any programming language or any user interface is a challenge (but let’s be honest, it’s exceptionally difficult with JavaScript and HTML). Ionic aims to make it easier for all parties involved by providing a great user interaction and an easy way to handle datetime values.

nexus-picker

Native HTML Inputs

Let’s start from the beginning: the user interaction. Simply put, native HTML inputs leave a lot to be desired, and what makes them even more challenging is how various browsers and operating systems all have a different interpretation of how they should work and how the user should interact with the selections.

There’s just no consistency of datetime inputs on which app developers and designers can rely. And what makes matters worse is that HTML’s datetime input is still undergoing changes and is not well supported. This is where Ionic steps in to smooth over the rough edges of native HTML elements.

Ionic DateTime Picker

iphone-picker

Instead of counting on each browser to provide a clean user interface and input selection (which simply cannot be relied upon across the board), Ionic provides the ion-datetime component as a way to normalize input behavior and to make it easier for developers to work with datetime values.

And as a side note, the DateTime picker is actually just a thin wrapper around Ionic’s Picker API. By exposing the Picker API, which the DateTime component uses under the hood, apps can create any single or multi-column selectable input, and they’re not just restricted to dates and times.

One difference from native HTML inputs, is that <ion-datetime> can format both the printed text of the value and the picker’s user interface. Traditionally, HTML’s <input>s have been notoriously difficult to style, or even to format. But now, with <ion-datetime>, developers can control the formats of both the display and interface, and even better, they can style them with simple CSS to get as detailed as needed.

pickers-img

As with any part of Ionic, we want to make sure the interface feels right at home on the platform with which the user is familiar. The Material Design, iOS, and Windows modes within Ionic all have datetime pickers that feel natural to their respective users. But what’s important to note is that the same source code is used for each platform, so there’s no need to rewrite the same concept for every platform.

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MMM DD, YYYY" [(ngModel)]="myDate"></ion-datetime>
</ion-item>

All of this only scratches the surface of what DateTime components brings to Ionic apps. Please check out the DateTime API to find out more about its capabilities and features.

Conclusion

Receiving datetime values from users and persisting that value within JavaScript is often an essential part of an app. However, dealing with datetime values is easier said than done. With Ionic’s new <ion-datetime>, we’ve made it even easier for developers to quickly create a great user interface with just a few lines of code. This is all part of Ionic’s larger effort to fill in the holes where native HTML struggles and make it even easier to develop performant apps.

Check it out and let us know how it goes! Also, take a look at the new Picker API, which helps to make all this possible.


Adam Bradley