htmlだけでフォームの日付入力にカレンダーを実装する方法

2016年5月17日

とっつぁん

HTML WEBデザイン

この記事は 2 分くらいで読めると思います

あとで読む

フォームの入力欄をカレンダーで日付を選択して入力したい

カレンダー

今回もメールフォーム等に使える小ネタ。

フォームの入力欄に日付を入力してもらいたい時、

html5ではtype属性にdateを使えば日付の入力欄になります。

コード

以下のようにtype="date"とするだけ、テキストフィールドなんかと変わらないですね。

<input type="date" name="日付">

サンプル

サンプルは以下の通り。

サポートしていないブラウザでは普通のテキストフィールドです。

致命的な事にFirefox、IEはサポートしていません(╬⓪益⓪)

結局使えるのか使えないのか？

サポートしていないブラウザがある中、type="date"を使っても大丈夫なの？と思う方もいらっしゃるでしょうそうでしょう。

Jqueryを使えばサポートしていないブラウザにもカレンダーを表示可能

type="date"をサポートしていないブラウザにも対応させる方法もあります。

サポートしているかどうかをチェックし、

サポートしていない場合はJqueryでカレンダーを表示する

という方法が一般的です…が、めんどくさいですよね（笑）

そもそもtype="date"が無かったころは

Jqueryでカレンダーを表示させたりしていたので、

むしろブラウザの判別という一手間増えちゃってる！

そんな事するんなら全部Jqueryでいいじゃんと思ってしまいます。

なんてこった！！

サポートしていないブラウザは無視しても大丈夫なのか？

W3CounterによるとIEのシェアは全体の10%未満（2016年4月）とかつての勢いは無くなっているものの、

何でもかんでも完全に無視しても良いか？と言われれば微妙な数字なのですが（笑）

これがIEではプログラムが動かない等の致命的な内容なら無視は出来ませんが

今回の場合は最悪ユーザビリティ的な問題ですので個人的には無視しても良い内容かと思います。

Windows 10 に搭載される新ブラウザ Microsoft Edgeではtype="date"にも対応しているようですし…