JQuery UI Datepicker not working on iOS

Question

I have a search form with several date fields that I use jQuery UI datepicker with pleasure:

<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 leads to a pretty awesome eyepicker popup on desktop browsers:

But for some reason, on the iPhone and iPad, clicking fields does nothing. This happens in both Chrome and Safari.

I used the following to check if a click event is recognized (it exists):

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

I also tried changing the input field to enter a date, not text:

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

but actually it doesn’t work as a solution (and actually this is what prompted me to use jQuery datepicker in the first place) for several reasons.

• placeholder text is not recognized, so the field is either blank or "mm / dd / yyyy" instead of "Arrival"
• datepicker , , , , .

Answer 1

.

, ( "mousemove"...), , iOS Chrome Safari ( ) .

, . mousemove , mousemove if mobile.

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

, innerWidth 480 . , .

bind, . http://touchpunch.furf.com/, , , , .