2

虽然<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 请求并提高整体页面性能，因为它们都有可用的本机日期选择器。

4

2 回答 2

3

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

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

我用了

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

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/

于 2013-11-12T16:16:43.600 回答
1

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

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

此外，您必须使用<link>标签将样式表插入文档而不是样式标签。

于 2013-09-17T22:45:14.683 回答