Hide jquery datepicker and show native in mobile

Question

I'm using datepicker from jquery-ui. My input is type=text. I want to show datepicker only when I'm on desktop, but when I'm in mobile browser I want to show the native datepicker. If I put type=date and i activate datepicker, it is showed together with the native datepicker, obviously.

How can I do to show jquery-datepicker in desktop and native in mobile?

Answer 1

You can not directly check if a device is a mobile phone or a desktop. However, you could check if the current browser has a native datepicker.

Use modernizer to check if the target browser has a native datepicker. Then, only if it does not have a native datepicker use the jQuery UI datepicker. You can achieve it like this:

<label>Date <input type="date"></label>

<script>
if(!Modernizr.inputtypes.date){
     $(’input[type=date]’).datepicker({
         // Consistent format 
         dateFormat: ’yy-mm-dd’
     });
}
</script>

If a browser has a native datepicker, then the format is always YYYY-MM-DD (see Is there any way to change input type="date" format?), therefore one should set the format of jQuery UI datepicker also to YYYY-MM-DD.

I also recommend to take a look at this article.

Note that you could also check with Modernizr if the target device is a touch device with !Modernizr.touch. However this is not useful, since there exists touch devices without native datepicker (Realistic scenario: Desktop computer with touch screen using firefox) .