当原生 HTML5 日期输入类型不存在时加载 jQuery UI 日期选择器

Question

虽然<input type="date"> 在桌面端并不常见，但这是移动端的首选方法。

我正在尝试实现本节底部的后备代码： http://diveintohtml5.info/forms.html#type-date

<form>
  <input type="date">
</form>

<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {

    // No native date picker support :(
    // Use Dojo/jQueryUI/YUI/Closure to create one,
    // then dynamically replace that <input> element.
    var script = document.createElement('script');
    script.scr = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);

    var style = document.createElement('style');
    style.href = "http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css";
    document.getElementsByTagName('head')[0].appendChild(style);

    $(function() {
       $.datepicker.setDefaults(
          $.extend($.datepicker.regional['']);
       );
    });
  }
</script>

使用上述逻辑，$(function()) 中的任何内容都会引发控制台错误，并且日期选择器未定义。我该如何重写它，以便仅在本机日期选择器不可用时才显示 jQueryUI 脚本和样式？

我正试图在移动浏览器和 Chrome 的这些页面上降低 http 请求并提高整体页面性能，因为它们都有可用的本地日期选择器。

Answer 1

这是[input type="date"] 支持的另一种后备方法，我发现它很有帮助。

会发生什么：测试浏览器是否支持日期输入类型。如果有，照常营业。如果没有，那么您可以加载创建漂亮的日期选择器控件所需的脚本和样式。

我用过

• YepNope.js 处理条件加载。
• Modernizr 进行测试。
• Date Picker 控件的 jQuery 和 jQuery UI。

在以您选择的任何方式包含上述脚本后，然后将此脚本添加到您的页面以处理条件回退。

yepnope({
    test: Modernizr.inputtypes && Modernizr.inputtypes.date,
    nope: [
          //'scripts/jquery.js','scripts/jquery-ui.js','css/jquery-ui.css'
          '~/scripts/app/dateinput.html5shim.js'
        ]
    });

-- jQuery、jQueryUI、Modernizr 和 YepNope 都加载到我的项目的包中。

我的 datepicker 脚本直接从下面的教程中复制而来。这只是在 DOM 准备好时为所有类型为 date 的输入元素初始化 jQuery UI 控件

$(function () {
    $("input[type='date']").datepicker();
});

这个答案来自css-tricks成名的总是乐于助人的Chris Coyier。完整教程在这里：http://css-tricks.com/progressively-enhancing-html5-forms/

Answer 2

您必须等到脚本加载后才能使用它。我建议使用 $.getScript 来加载它。

$.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js", function(){
   $.datepicker.setDefaults(
      $.extend($.datepicker.regional[''];)
   );
});

您还必须使用<link> 标签将样式表插入到您的文档中，而不是样式标签。