ionic-framework: not working on iOS

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>

simulator screen shot may 5 2016 10 24 25 am

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

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (8 by maintainers)

Most upvoted comments

Anxiously waiting… 😛 anxiouslywaiting

aaronklaser on May 9, 2016

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!

jgw96 on May 9, 2016

@keithdmoore thanks

Eliseuplugin on Mar 15, 2017

@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.)

zbarbuto on May 10, 2016