Create ion-date / ion-datetime similar to ion-select

[mhartington]

From @richardshergold on January 12, 2016 9:38

@adamdbradley I love the ion-select you have added to alpha49. I think it looks great.

On my form I have a bunch of select fields and also a date input field. The date input now feels a little out of place as the date fields look different to the ion-selects and also when you click on the date field the selections appear at the bottom of the screen just like an old style select rather than in an alert box like your new ion-select i.e

  <ion-select >
    <ion-label>Gender</ion-label>
    <ion-option value="f" checked="true">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>

  <ion-label>Date</ion-label>
  <input type="date">

Would it be possible to have the date input look and feel the same as the ion-select ?

Copied from original issue: driftyco/ionic2#931

[mhartington]

From @richardshergold on January 12, 2016 14:11

I got round this by programatically building my date list and using a select for the date input. Probably not the cleverest way but it will suit me for now.

[mhartington]

From @adamdbradley on January 12, 2016 14:53

Absolutely, it's on our todo :)

[keithdmoore]

IMHO: This way of doing selects is a huge step back. Because of this, Ionic2 feels less native and more like a web app. With Ionic v1, I always thought it was really cool to be able to use the native selectors for drop downs and for dates. I'm sure you guys have your reasons for not implementing this natively. However, every product owner I have talked to so far dislikes this behavior. So I am forced to implement my own.

[keithdmoore]

I am a bit confused. Is the following intended to work on iOS and Android and you are just allowing some different options with a future ion-date/ion-datetime tag? The code below works on Android. A native datepicker is opened. However, in iOS there is no ability to enter a date whatsoever. No native datepicker, nada, zelch.

 <ion-item>
    <ion-label floating>Birthday<span danger>*</span></ion-label>
    <ion-input ngControl="birthDate" type="date"></ion-input>
</ion-item>

[jgw96]

Hey @keithdmoore ! You can still use the native date picker on platforms that support the date input (like modern android). Unfortunately safari (and therefore ios) does not support date inputs ): http://caniuse.com/#feat=input-datetime . But, on platforms that support it there is definitely nothing stopping you from using the native date input if thats what you would like!

[keithdmoore]

@jgw96 iOS safari DOES partially support date/time. "Partial support in iOS Safari refers to not supporting min, max or step attributes". So since this works on iOS <input type="date" />, I am lead to believe there is a bug with ion-input type="date" on iOS. I guess I just need to create a separate issue for that?

[jgw96]

Hey, sorry read the chart wrong (: . It does have partial support. Sure, you can create a separate issue for it. Also, just so you know, the reason behind creating our own custom datepicker, and not using the native one is because of things like partial support. With a custom datepicker we can assure that it works exactly the same across every platform. And, as you can see from things like the "alert" component for Ionic 2, we are striving for as close to a native feel as we can get (: Because of this, i think you will be very happy with the ion-datetime element !

[keithdmoore]

@jgw96 Awesome! Glad to hear that! For now, I will open an issue for the current issue with type="date". Thanks for the followup!

[jgw96]

@keithdmoore No problem at all! Also, i am going to close this issue, as i believe the original issue is fixed. Thanks for using Ionic everyone!

[adamdbradley]

Added to the 2.0 branch and should be available in beta7: 1e331c9

[keithdmoore]

@adamdbradley or @brandyscarney: I know this is a dumb question but how do I reference the 1e331c9 commit in my package.json to upgrade to this version? ionic-angular: <???>