日期时间选择器 Safari 不起作用

问题描述

在Safari浏览器中使用日期时间选择器时，无法正常使用，点击时没有任何反应。

解决方案

1. 使用第三方日期时间选择器

由于Safari的日期时间选择器存在兼容性问题，可以考虑使用第三方日期时间选择器来代替原生选择器。推荐几个常用的日期时间选择器插件：

• bootstrap-datetimepicker
• flatpickr
• datepicker

2. 手动实现日期时间选择器

如果不想使用第三方插件，可以手动实现日期时间选择器，在Safari下使用原生日期选择器，在其他浏览器使用其他日期选择器。

<input type="datetime-local" class="form-control" id="datetimepicker" name="datetimepicker" />

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if(isSafari){
  $('#datetimepicker').attr('type','text');
  $('#datetimepicker').datetimepicker({
    format: 'YYYY-MM-DD HH:mm',
    locale: 'zh-cn'
  });
}
else{
   $('#datetimepicker').attr('type','datetime-local');
}

上面代码中，我们首先判断浏览器是否为Safari，如果是则将输入框类型改为文本类型并使用第三方日期时间选择器，如果不是则保留原生日期选择器。

3. 使用polyfill

还可以使用 polyfill 库，它们提供了许多现代特性的垫片，以便在旧版浏览器上使用。这些库也可以解决 Safari 浏览器中原生日期选择器不能工作的问题。

• date-input-polyfill
• webshim

结论

以上就是解决 Safari 浏览器中日期时间选择器不起作用的三种方法，选择哪种方法取决于您的具体需求，建议使用第一种方法更为方便快捷，但是如果您想修改样式效果，那么第二种方案会更好。