Ionic-framework: <ion-input type="date"> not working on iOS

[keithdmoore]

In Ionic2, I am trying to implement the ability for a user to enter their birthday using the HTML5/native date picker functionality. (Note: Not using the Cordova DatePicker plugin).

The following code works fine in Android. On focus, the native date picker is presented just fine. However, in iOS the input is not responding to the on focus event. Hence, no date picker is presented.
Also, notice how the "Birthday" input is kindy "jacked" up.

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

FYI, this works in iOS but it's not styled the way <ion-input> would be:

<input type="date"/>

This leads me to believe this is a bug with Ionic2.

Ionic info:
Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6-201604261740
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: 1.8.5
ios-sim version: 1.9.0
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.3 Build version 7D175

[jgw96]

Hey! I see you opened a separate issue, thanks! Would you mind making a plunker that demonstrates this? From your above screenshot i see a few weird things that i would like to see the code behind. Feel free to use the plunker link that is in the issue template!

[keithdmoore]

@jgw96 Not sure how this will help since this is happening on an iOS simulator or iOS device. But I will comply: http://plnkr.co/edit/0rXpPSbW1vJuxiU8ESY4?p=preview

[lawlesscreation]

+1 I also have this same issue.

[jgw96]

Hello everyone! I believe this issue will be fixed once we release our DatePicker component which should be coming soon. I am going to keep this issue open and will update it once that component has been released. Thanks for using Ionic!

[aaronklaser]

Anxiously waiting... :P

[trucle]

+1

[zbarbuto]

Is there an ETA on the DatePicker component?

If anyone is stuck for an alternative you can still just use a regular <input type="date"> inside an <ion-item> and style it to look like the ionic inputs:

input[type="date"] {
  background-color: transparent;
  border: none;
  width: 100%;
}

I did notice, however, that this returns the date in string format, not as a Date object like it did in Ionic1/Angular1 so keep that in mind.

[keithdmoore]

@zbarbuto Thanks for the suggestion. I tried that but then the floating label disappeared and I wasn't even able to click the field. Seems to have to do with ion-label { margin: 13px 8px 13px 0; }. Even removing that style, the label still shows just barely able the line but nothing happens when you click on it. Looks like the actual input gets removed. That would explain why nothing happens when you click.

[zbarbuto]

@keithdmoore The example I gave was instead of a floating label. I am currently using stacked labels with a custom styles on label for the date to match the other stacked labels:

<ion-list>
  <ion-item>
    <ion-label stacked>Name</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>
  <ion-item>
    <label class="dateLabel">Date of Birth</label>
    <input type="date">
  </ion-item>
</ion-list>

with styles to mock .dateLabel and input[type="date"] to match ionic's (font-size, color etc.)

[lawlesscreation]

@jgw96 thanks for keeping us informed!

[jgw96]

@lawlesscreation No problem! Thanks for using Ionic!

[Manduro]

The datetime component was just added in the v2 branch ;)

[jgw96]

Hey everyone, the datetime component has been finished and will be in the next release of Ionic 2!

[jgw96]

Gonna go ahead and close this now. Feel free to comment though!

[Eliseuplugin]

@keithdmoore thanks

[mspanesar145]

@jgw96 We are using ionic 1 and want to use type=date in that. So will min max work in it or not.

[marcocanino]

Documentation https://ionicframework.com/docs/api/components/datetime/DateTime/

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

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.