javascript - 当 native 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 脚本和样式仅在 native 日期选择器不可用时显示？

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

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 都加载到我的项目的一个包中。

我的日期选择器脚本是直接从下面的教程中复制过来的。这只是在 DOM 准备就绪时为所有日期类型的输入元素初始化 jQuery UI 控件

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

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