jQuery UI Datepicker not working on iOS

Question

I have a search form with a couple of date fields that I'm happily using jQuery UI's datepicker on:

<input class="formFields datepicker" id="arrival" name="arrival" required="" placeholder="Arrival" readonly="true" type="text">
<input class="formFields datepicker" id="departure" name="departure" required="" placeholder="Departure" readonly="true" type="text">

$( ".datepicker" ).datepicker();

This results in a rather splendid, pleasing to the eye datepicker pop-up on desktop browsers:

But for some reason, on iPhone and iPad, tapping the fields does nothing. This is the case in both Chrome and Safari.

I have used the following to check if the click event is being recognised (it is):

$(".datepicker").click(function(){
    alert("clicked me");
});

I also tried amending the input field to type date rather than text:

<input class="formFields datepicker" id="arrival" name="arrival" required="" placeholder="Arrival" type="date">

but this doesn't really work as a solution (and actually is what pushed me towards using the jQuery datepicker in the first place) for a couple of reasons.

• the placeholder text is not recognised, so the field either shows up blank or with "mm/dd/yyyy" in there, instead of 'Arrival'
• the default datepicker then has to be used on desktop, which really isn't all that attractive, at least compared to what I've got currently

Answer 1

might be a bit late.

I solved this by commenting out a bind('mousemove' ...), it seems that that event is causing iOS Chrome and Safari (in my case) to be non-responsive.

I commented out the code and the code was functional again. but I needed mousemove on PC, so I wrapped the mousemove in an if mobile statement.

if (window.innerWidth < 480) {
    $(document).bind('mousemove', function (e) {
       // something that work on PC.
    })
}

maybe its stupid to use innerWidth 480 to detect mobile. but it will give you an idea on how this can be solved.

You could also wrap the bind method if its used a lot. there is a library http://touchpunch.furf.com/ which doesnt seem to be fully functional, but gets the idea accross.