Input type=date not work properly on Ionic 2


#1

I try to use input type=“date” on Ionic 2, but when open on iPhone, we need to hold tap about 0.5 second to focus the input.

Do someone know about this problem? How can we focus on input type date by just one tap, not hold tap?


#2

@Genesis, i was facing the same issue so i used the cordova date picker plugin instead.

This is how you can use it

//HTML
<input type="text" readonly (focus)="showDatePicker()" placeholder="Select Date" id="eta-datepicker">

//JS

showDatePicker(){

    var options = {
        date: new Date(),
        mode: 'date'
    };

    datePicker.show(options, function(date) {

        $('#eta-datepicker').val(date);

    }, function(error) {

        //alert('Error: ' + error);

    });
}

#3

i would build an own component instead of hacky selecting the input.
And you are not using ngModel so there is no need to use a text input at all --> add a div with ng-click --> and show the formatted date as div content.

Maybe the focus approach has some sideeffects with the keyboard


#4

@bengtler, i don’t know about Genesis, but you sir did solved my problem with the keyboard. Thanks for the hint :smiley:


#5

This should be fixed in the next release by this:

https://github.com/driftyco/ionic2/commit/2a32711857dfd48d675fbcea4d89c618fa0384ee


#6

Thanks! could be awesome a calendar + timepicker component (a custom modal or similar).


#7

Putting this here in case someone is looking for a resolution. Looks like an issue with iOS now on beta6. See this issue: https://github.com/driftyco/ionic/issues/6445