提问者:小点点

HTML5日期选择器不显示在Safari


以前使用过jQuery日期选择器,现在我将网站上表单中的一些日期字段转换为HTML5日期选择器。

在文档中,它说Safari是受支持的:但是,它目前只显示一个文本字段(而Chrome和其他浏览器则正确显示日期选择器)。

echo "<input type='date' name='Date' min='$todaymin'>";

(在不使用“最小”属性的情况下应用相同的设置)

这是我的代码行-我是做错了什么,还是我只是读错了留档,它不支持在Safari?

非常感谢。


共3个答案

匿名用户

Safari桌面版本不包括本机日期选择器(尽管iOS)。顺便说一句,IE也没有。这是非常令人沮丧的,因为如果开发人员这样做,它可以节省很多时间。

这是跟踪it支持的有用链接:http://caniuse.com/#feat=input-日期时间

匿名用户

虽然Safari(或IE)没有本机日期选择器,但一个很好的解决方法是在日期输入中添加一个占位符属性。这将通知Safari和IE用户回退文本输入应该采用哪种格式(即yyyy-mm-dd)。

占位符不显示在支持type="date"的浏览器上,因此此解决方案不会影响其他浏览器。

例如

匿名用户

取自http://www.javascriptkit.com/javatutors/createelementcheck2.shtml

使用jQuery和jQuery UI,您可以创建一个跨浏览器的日期选择器,只有当浏览器本地不支持它时才会弹出。如果您的项目中已经有jQuery,只需执行以下操作:

var dateClass='.datechk';
$(document).ready(function ()
{
  if (document.querySelector(dateClass).type !== 'date')
  {
    var oCSS = document.createElement('link');
    oCSS.type='text/css'; oCSS.rel='stylesheet';
    oCSS.href='//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css';
    oCSS.onload=function()
    {
      var oJS = document.createElement('script');
      oJS.type='text/javascript';
      oJS.src='//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js';
      oJS.onload=function()
      {
        $(dateClass).datepicker();
      }
      document.body.appendChild(oJS);
    }
    document.body.appendChild(oCSS);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" name="datechk" class="datechk">