The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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.

  • Nilas Gram

    This is excellent!

  • prashant khodade

    Everytime I wish some feature should have been part of Ionic, within few weeks I see its part of Ionic. Ionic DateTime picker is amazing. Thank you Ionic Team. Can you please provide some more documentation about Picker API too. Documentation for DateTime picker is good but it would help to have some example for using Picker API for non-datetime data also.

  • http://ivanvasquez.co/ Ivan Camilo Vásquez

    Android’s datepicker is very different from the ones displayed. It would be awesome to have this design for Android devices using

    • th3m4ri0

      Yup, would be great if Chrome Android would add it to their HTML5 API.

    • Ian

      Yes, yes and more yes. It’s mind-boggling how pickers are used for any inputs at all. They’re so tedious. So much time wasted: coarse scroll to get near the desired value plus a few extra up/down scrolls to get to the exact value you want. Using a calendar/clock widget like above functions so much better. Apple has really fallen of the UI/UX wagon

  • Phil Mickelson

    Excellent! Thank you so much.

  • Andrew Clinton

    Great work guys! Can’t wait to start using this!

  • Carman Babin

    Any plans to make this a part of ionic 1? i REALLY hope so…

  • Nate

    I’ll second Ivan’s comment. Looks like a great feature for people that want their apps to look native in iOS. In the end, it is perpetuating a terrible UX which apple is clinging to.

  • https://guillermogfer.com guillermogfer

    Will it be available also in Ionic 1.x?

  • Daniel Leeder

    It certainly looks like a slightly skinned version of the default iOS picker, which isn’t very intuitive. There’s no context for picking the date at all. Look at Android’s implementation — it presents a familiar calendar view which lets you know what day of the week you’re picking. In terms of scheduling, knowing that a date is ‘next Friday’ or ‘two weeks from now’ is incredibly useful.

  • Frédéric Camblor

    How about the “time” portion of the “datetime” ?
    I cannot see any description about it in your blog post.
    Will we be able to both select date & time ? and time only ?

    • Dweep Patel

      http://ionicframework.com/docs

      u can change the format as in HH for 00—23 hh for 00—12 h for 0–12 i guesss

      mm for 00–59 m for 0-59

      A for AM/PM

      *check the link first*

      • Frédéric Camblor

        This link seems better http://ionicframework.com/docs/v2/api/components/datetime/DateTime/

        Anyway, I asked because we never have any screenshot displaying case where we have “time only” or “date + time” selection UI, which may take some place in the screen. I was just hoping to have a first insight of what the “time” component was looking like (without having to download ionic and try it by myself)

        Thanks though,

  • Dweep Patel
  • Ab Lopez

    Awesome addition to Ionic, thanks guys. However, you really need to fix
    date validation (to avoid selecting invalid dates like April 31st or Feb
    30th) in the picker, as it’s something absolutely essential that should
    have been included right from this release.

    I think you should
    just auto-update the day slot in the picker when the month slot is
    changed, based on how many days the month selected actually has. Here’s a
    simple dependency-less function I wrote that may contribute to
    implementing it in the next beta:

    function daysInMonth(year, month){
    for(var day=28; day<=32; day++){
    if(new Date(year, (month – 1), day).getMonth() != (month – 1)){
    day –;
    break;
    }
    }
    return day;
    }

  • http://nicholls.azurewebsites.net/ Juan David Nicholls

    Ionic 1.x please! 😀

  • http://www.filipesperandio.com Filipe Esperandio

    This is great, guys. Much appreciated.
    The thing I’m missing, though, is to show week days in the picker – something present on Android’s native… (it is very difficult to select a date when you know something has to happen next Saturday, but you have no idea it is May 28th 😉

  • ionic newb

    For me ion-datetime is not working please help.

  • Sebastián Rojas Ricaurte

    Please, look at android solution fro pick a date

  • PengCheng Zhou

    Besides month-day issues, there is also display issue to display date and time.

    When defining:

    End:

    after picking 2016-01-01 01:01 am, it only shows 2016-01-01 01… on iphone even there are still lots of rooms.

  • Gregor Srdic

    Is it possible to set a custom step, like 15 minutes?

  • Sebastián Rojas Ricaurte

    People need to see the day of week when selecting

  • Abhisek Chandra

    Display is not working see this issue and please suggest a fix 🙁
    https://forum.ionicframework.com/t/ion-datetime-display-error-on-android-device/54800

  • mx

    I’m writing a progressive Web App using Ionic 2. How could i allow keyboard input to enter date values?