【IE・Edge対応】日付入力フォームにカレンダーを表示させる方法

日付入力フォームにカレンダーを表示させる方法をご紹介します。

ChromeとFirefoxだけでよければすごく簡単

HTML5の<input type=”date”>を用いれば一発です。

<form>
日付
<input type="date">
</form>

Chrome

Firefox

IE・Edgeではカレンダーが表示されない

お察しの通りIE、Edgeではカレンダーが表示されません

IE

なんも表示されません

Edge

カレンダーは表示されませんがスクロールが表示されます。

IE・Edgeにもカレンダーを表示させたい場合

jQuery ui Datepickerを使います。

ソース例

とりあえずコピペするだけで動きます。

[php]
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;
&amp;amp;lt;html lang=&amp;amp;quot;ja&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;head&amp;amp;gt;
&amp;amp;lt;meta charset=&amp;amp;quot;utf-8&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;meta http-equiv=&amp;amp;quot;X-UA-Compatible&amp;amp;quot; content=&amp;amp;quot;IE=edge&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;meta name=&amp;amp;quot;viewport&amp;amp;quot; content=&amp;amp;quot;width=device-width, initial-scale=1&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;title&amp;amp;gt;フォームテスト&amp;amp;lt;/title&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;stylesheet&amp;amp;quot; href=&amp;amp;quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;/head&amp;amp;gt;
&amp;amp;lt;body&amp;amp;gt;
&amp;amp;lt;form&amp;amp;gt;
日付
&amp;amp;lt;input type=&amp;amp;quot;text&amp;amp;quot; class=&amp;amp;quot;datepicker&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;/form&amp;amp;gt;
&amp;amp;lt;script src=&amp;amp;quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script src=&amp;amp;quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script src=&amp;amp;quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js&amp;amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;script&amp;amp;gt;
$(function() {
$(&amp;amp;quot;.datepicker&amp;amp;quot;).datepicker();
});
&amp;amp;lt;/script&amp;amp;gt;
&amp;amp;lt;/body&amp;amp;gt;
&amp;amp;lt;/html&amp;amp;gt;
[/php]

こんな感じ

解説

<head>内にcss記述。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">

カレンダーを表示させたい箇所に『class=”datepicker”』を追加。

<input type="text" class="datepicker">

</body>直前にjs記述。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
<script>
$(function() {
$(".datepicker").datepicker();
});
</script>

以上です。簡単ですね。

デザインを変更する場合

ThemeRollerを参考に読み込むcssを変更してください。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css">

記事がお役に立ちましたらシェアお願いします!