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())内的任何内容都会引发控制台错误并且未找到日期选择器。我如何重写这个，以便只有当本地datepicker不可用时才会显示jQueryUI脚本和样式？

我试图在移动浏览器和Chrome浏览器的这些网页上保持较低的http请求和整体网页性能，因为它们都有原生日期选择器。

Answer 1

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

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

我用过

YepNope.js来处理条件加载。
Modernizr进行测试。
jQuery＆amp; Date Picker控件的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>标记将样式表插入到文档中而不是样式标记。

当本机HTML5日期输入类型不存在时加载jQuery UI datepicker

2 个答案: