jquery-ui - 隐藏 jquery datepicker 并在移动设备中显示 native

Question

我正在使用来自 jquery-ui 的日期选择器。
我的输入是type=text .我只想在桌面上显示日期选择器，但是当我在移动浏览器中时，我想显示 native 日期选择器。
如果我把 type=date我激活了日期选择器，显然它与 native 日期选择器一起显示。

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

Answer 1

您无法直接检查设备是手机还是台式机。但是，您可以检查当前浏览器是否具有 native 日期选择器。

使用modernizer检查目标浏览器是否具有 native 日期选择器。然后，仅当它没有 native 日期选择器时，才使用 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 检查。 .然而这没有用，因为存在没有 native 日期选择器的触摸设备(现实场景:使用 firefox 的带有触摸屏的台式计算机)。