隐藏 jquery 日期选择器并在移动设备中显示本机

Question

我正在使用 jquery-ui 的日期选择器。我的输入是 type=text。我只想在桌面上显示日期选择器，但在移动浏览器中我想显示本机日期选择器。如果我输入 type=date 并激活日期选择器，它显然会与本机日期选择器一起显示。

如何在桌面上显示 jquery-datepicker 而在移动设备上显示本机？

Answer 1

您无法直接检查设备是移动设备 phone 还是桌面设备。但是，您可以检查当前浏览器是否具有本机日期选择器。

使用modernizer检查目标浏览器是否有本地日期选择器。然后，仅当它没有本机日期选择器时才使用 jQuery UI 日期选择器。你可以这样实现：

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

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

如果浏览器有本机日期选择器，则格式始终为 YYYY-MM-DD（参见 Is there any way to change input type="date" format?），因此应设置 jQuery UI 日期选择器的格式也到 YYYY-MM-DD.

我也建议看看这个article。

请注意，如果目标设备是 !Modernizr.touch 的触摸设备，您还可以使用 Modernizr 进行检查。然而，这没有用，因为存在没有原生日期选择器的触摸设备（现实场景：使用 firefox 的带触摸屏的台式计算机）。

隐藏 jquery 日期选择器并在移动设备中显示本机

Hide jquery datepicker and show native in mobile

mobile

desktop

native

jquery-ui

datepicker