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

Question

我正在使用 Modernizr，但在获取 jquery UI 日期选择器以代替 FireFox 中的本机 html5 日期输入显示时遇到了问题。

这 fiddle 说明了我的意思 - 在 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.

时，它的类型仍然是 'date'

我是不是漏掉了什么？

非常感谢

Answer 1

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

 * Modernizr has an optional (not included) conditional resource loader
 * called Modernizr.load(), based on Yepnope.js (yepnopejs.com).
 * To get a build that includes Modernizr.load(), as well as choosing
 * which tests to include, go to 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 只是一个别名。

另一个问题是您正在为 Modernizer.load 应该获取的脚本使用 HTTP URL，这意味着它们在通过 HTTPS 访问 JSFiddle 时不起作用。考虑 protocol-reliative 网址，或者最好始终使用 HTTPS 网址。

↪See here for a fixed version of your Fiddle

Answer 2

我刚刚在你的 fiddle* 中粘贴了一个简单的 modernizr 自定义 build，它似乎适用于 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 的标准开发 build 中，这里是自定义 build：

*请原谅我不喜欢的粘贴，因为我不想为那个 fiddle 托管自定义 build :)

注意

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

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

Modernizr: Failing to execute datetime() on date input in Firefox

javascript

firefox

jquery

modernizr