はじめに
<input type="date">
を使っている時にどのブラウザにもこの属性が使えるわけではないので,
jQuery先生が用意してくださっているライブラリを使おうと思います!
以下画像のようにChrome
とかOpera
ぐらいしか対応していない状況です.
ユーザビリティとか可用性とか利便性とかどれいうのかはわかりませんが,
これは是非やっておくと便利なのではないのでしょうか!!!
詳しくはリンクより
Can I use... Support tables for HTML5, CSS3, etc
ソースコード
説明
jQueryとjQueryUIを読み込む
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> </head>
フォームを作る
<form action="index.html" method="POST"> <input type="text" id="datepicker"> </form>
カレンダーのデザインを選ぶ
左側の枠から,「Gallery」を選択して色々あるデザインの中からデザインを選んでください
続いて,headに以下を追加
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
それで先ほど選んだデザインの名前をredmond
のところと置き換える!
例:UI darknessを選んだなら→「ui-darkness
」
スペースは「-」に,大文字は「小文字」に!
Javascriptを書く
$(function() { $("#datepicker").datepicker(); });
ただ,IDにjQueryのライブラリ内になる関数を引っ付けて呼び出してるだけですね!
実際にやってみよう!
これで対応していないブラウザでもフォームにカレンダーを表示させることができます!
入力方式は「yyyy/mm/dd
」です
最後に
IEの普及率はやや下がっていますが,それでも他のブラウザには負けないほどの普及率なのに,
まだこういう機能を使えるようにならないのでしょうか?
でもWindows10に標準搭載されているEdgeでは結構対応しているらしいです!
私の環境では,type="date"
は機能してくれました!
私は,この間SafariからCanaryに若干乗り換えました!
でもCanaryは若干たまに難点があるので困りモノです.
世界ブラウザシェアランキング
やっぱり世界はちゃんと現実をみていますね!
日本ブラウザシェアランキング
未だにIE使いがどうやら多いようです.
現実を見ましょう?この間IEがなんとかってあったじゃん...
画像の方をお借りいたしました.
引用:ソフトウェアテスト・第三者検証ならウェブレッジ | 体験を科学する