title: jQuery UI date picker doesn’t show up on mobile iOS and Android (but shows on desktop)
body: <p>I use a jQuery UI date picker on a web site.</p>
  
  <p>It works very well on desktop browsers, the calendar is showing up when user click on input and i can save the selected date.</p>
  
  <p>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 :</p>
  
  <p>On mobile, i don't see the date picker :</p>
  
  <p><a href="https://i.stack.imgur.com/QmNLe.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QmNLe.jpg" alt="enter image description here"></a></p>
  
  <p>On desktop, it works fine :</p>
  
  <p><a href="https://i.stack.imgur.com/Bo4QM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bo4QM.jpg" alt="enter image description here"></a></p>
  
  <p>Here is the html code of the input (custom module on Drupal 8 so the html is generated by the Form API) :</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>I’ve tried to force the date format with JS (it works on desktop) but i still have the iOS date selector :</p>
  
  <pre><code>$("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });
  </code></pre>
  
  <p>I’ve tried to turn the input in text-input and then attach datepicker. Still no luck.</p>
  
  <pre><code>$("#edit-date-debut").attr('type','text');
  $("#edit-date-debut").datepicker({ dateFormat: 'dd-mm-yy' });
  </code></pre>
  
  <p>For now, what i can do is generated an input type texte :</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Do you know how can i handle this ? </p>