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

Question

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

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

Answer 1

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

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

<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（请参阅有没有办法改变输入类型=“日期”格式？ ），因此应该将jQuery UI datepicker的格式设置为YYYY-MM-DD 。

我还建议你看一下这篇文章 。

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