Ionic 2: Fixing Date Inputs for the Mobile Web
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
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.
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.
<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.