Modernizr：无法在 Firefox 中对日期输入执行 datetime()答案

【问题标题】：Modernizr: Failing to execute datetime() on date input in FirefoxModernizr：无法在 Firefox 中对日期输入执行 datetime()
【发布时间】：2015-08-17 17:49:42
【问题描述】：

我正在使用 Modernizr，但无法让 jquery UI 日期选择器在 FireFox 中显示本地 html5 日期输入。

这个小提琴说明了我的意思 - 在 FireFox 中打开它 在 Firefox 中打开时，我只得到一个文本输入 http://jsfiddle.net/Te2yL/

代码：

<head>
     //Include Modernizr - all items are included (full-fat version)
     <script src="assets/js/vendor/modernizr.js"></script>
</head>

<body>
     <input 
         type="date" 
         id="start-date"  
         ng-model="someVariable" 
         format-date 
         class="form-control date" 
     />

     <script>

    Modernizr.load({
        test: Modernizr.inputtypes.date,
        nope: ['https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js',
        'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/themes/smoothness/jquery-ui.css'
        ],
        complete: function () {
            $('input[type=date]').datepicker({
                dateFormat: 'yy-mm-dd'
            });                 
        }
    });

</script>

</body>
</html>

确认，当在 FireFox 中打开时，会下载 Jquery-ui js & css。

我仍然在浏览器中显示文本输入 - 在检查 DOM 时，它的类型仍然是“日期”。

我错过了什么吗？

非常感谢

【问题讨论】：

欺骗stackoverflow.com/questions/7197016/…
我已经检查了那个问题（以及很多类似的问题）。我不认为它是重复的，因为我使用 complete() 函数然后调用 jquery.datetime() 即我不只是使用modernizr并期望它被修复？小提琴也...
它是重复的，因为您使用完整功能需要首先成功运行测试。它没有，所以这也行不通。
完整的功能确实受到打击。或者这不是你在暗示的？
在您的小提琴中，modernizr 未初始化：TypeError: Modernizr.load is not a function。也许它有问题？

标签： javascript jquery firefox modernizr

【解决方案1】：

查看您可以从 cdnjs.com 包含的 full, uncompressed version of Modernizr 的 JavaScript 时，顶部有一条大评论：

 * Modernizr 有一个可选的（不包括） 条件资源加载器
 * 基于 Yepnope.js (yepnopejs.com) 调用 Modernizr.load()。
 * 获得包含 Modernizr.load() 的构建，以及选择
 * 要包含哪些测试，请转到www.modernizr.com/download/

因此，您必须从 the Modernizr website 下载自定义版本，其中包括 Modernizr.load。

从包含 Modernizr.load 的 Modernizr 构建的源代码中，我可以看到将 Yepnope 和 Modernizr 粘合在一起的唯一代码是这一行：

Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0));};

因此，除了在您自己的服务器上托管定制的 Modernizr 构建，您还可以包含来自 cdnjs.com 的 Modernizr 和 Yepnope，然后使用这行代码将它们粘合在一起。或者你可以忘记 Modernizr.load 并使用 yepnope 函数，Modernizr.load 只是一个别名。

另一个问题是您将 HTTP URL 用于Modernizer.load 应该获取的脚本，这意味着它们在通过 HTTPS 访问 JSFiddle 时将无法工作。考虑protocol-reliative URL，或者更好的是，始终使用 HTTPS URL。

↪See here for a fixed version of your Fiddle

【讨论】：

我已经这样做了 - JS Fiddle 比代码 sn-p 更容易包含 - 在我自己的代码中（与上面相同（modernizr 调用））我包含了 Modernizr 构建其中包括所有内容，即完整的胖版本
你在firefox中打开fiddle了吗？
@Lee2808 当我在 Firefox 中打开 fixed Fiddle 时，日期选择器出现，只有 CSS 没有加载，因为没有使用完整的 URL。如果这不能解决您的问题，则它必须特定于您在网站上使用的代码。

【解决方案2】：

我刚刚在您的 fiddle* 中粘贴了一个简单的modernizr 自定义构建，它似乎适用于 Firefox。

但是，我不得不改变你加载 jquery-ui css 的方式：只需用你想要的主题替换那个 cdn：

    nope: [
      'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
      'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 
      'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css'],
    ....

user2428118 是正确的，因为yenope 不包含在modernizr 的标准开发版本中，这里是自定义版本：

*请原谅不喜欢的粘贴，因为我不想为那个小提琴托管自定义构建 :)

注意

我偶然发布了相同的答案here，但它似乎也适用于该问题..

【讨论】：