デスクトップでは一般的ではありませ<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 のページ全体のパフォーマンスを向上させようとしています。