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 スクリプトとスタイルが表示されるように、これを書き直すにはどうすればよいですか?

これらのページでは、すべてネイティブの日付ピッカーが利用できるため、http 要求を抑え、モバイル ブラウザーと Chrome のページ全体のパフォーマンスを向上させようとしています。

4

2 に答える 2

3

[input type="date"]これは、私が役立つサポート のための別のフォールバック方法です。

何が起こるか: ブラウザは、日付の入力タイプをサポートしているかどうかを確認するためにテストされます。その場合は、通常どおりのビジネスです。そうでない場合は、適切な Date Picker コントロールを作成するために必要なスクリプトとスタイルをロードできます。

使った

任意の方法で上記のスクリプトを含めた後、このスクリプトをページに追加して、条件付きフォールバックを処理します。

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 の名声で常に役立つ 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 に答える