隐藏jquery datepicker并在移动设备中显示原生

Question

我正在使用jquery-ui中的datepicker.我的意见是type=text.我只想在桌面上显示datepicker,但是当我在移动浏览器中时,我想显示本机日期选择器.如果我放入type=date并激活datepicker,它显然与本机日期选择器一起显示.

如何在桌面和移动设备中显示jquery-datepicker？

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) .