Question

我正在使用jquery-ui中的datepicker。我的输入是type=text。我想在桌面上显示datepicker，但是当我在移动浏览器中时，我想显示本机日期选择器。如果我放type=date并激活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（请参阅Is there any way to change input type="date" format?），因此应将jQuery UI datepicker的格式设置为YYYY-MM-DD。

我还建议您查看此article。

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

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

1 个答案: