jQuery UI日期选择器未在移动iOS和Android上显示（但在桌面上显示）

Question

I use a jQuery UI date picker on a web site.

It works very well on desktop browsers, the calendar is showing up when user click on input and i can save the selected date.

My issue is on mobile devices (iOS and Android), the calendar is not showing and i have the native iOS date sector which have the wrong format :

On mobile, i don't see the date picker :

On desktop, it works fine :

Here is the html code of the input (custom module on Drupal 8 so the html is generated by the Form API) :

<input type="date" data-drupal-selector="edit-date-debut" aria-describedby="edit-date-debut--description" data-drupal-date-format="Y-m-d" class="form-date required form-control hasDatepicker" id="edit-date-debut" name="date_debut" value="" required="required" aria-required="true" step="300">

I've tried to force the date format with JS (it works on desktop) but i still have the iOS date selector :

$("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });

I've tried to turn the input in text-input and then attach datepicker. Still no luck.

$("#edit-date-debut").attr('type','text');
$("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });

For now, what i can do is generated an input type texte :

<input data-drupal-selector="edit-date-debut" aria-describedby="edit-date-debut--description" class="form-text required form-control hasDatepicker" type="text" id="edit-date-debut" name="date_debut" value="" size="60" maxlength="128" required="required" aria-required="true" readonly="readonly">

Then, i attach the datepicker and it still working on desktop. On mobile, i don't see anymore the native date selector with the wrong format. I still have no date picker calendar but user can type the date in input text. So it's a first step.

Do you know how can i handle this ?

Answer 1

The solution is not to use :

<input type="date">

but

<input type="text">

And attach a date picker like jQuery Datepicker or Bootstrap Datepicker

In safari, i need to test in private mode because sometines the Safari cache prevents me to see update in my JS.