『入る学科間違えた高専生』の日記

プログラミングのコードを書いたりする予定です。あとは日記等。あといつまで高専生やねん

jQueryを使ってフォームにカレンダーを表示させる!

はじめに

<input type="date">を使っている時にどのブラウザにもこの属性が使えるわけではないので,
jQuery先生が用意してくださっているライブラリを使おうと思います!

以下画像のようにChromeとかOperaぐらいしか対応していない状況です.
ユーザビリティとか可用性とか利便性とかどれいうのかはわかりませんが,
これは是非やっておくと便利なのではないのでしょうか!!!

f:id:nanashinodonbee:20150901032357p:plain

詳しくはリンクより

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>

カレンダーのデザインを選ぶ

jqueryui.com

左側の枠から,「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」です

f:id:nanashinodonbee:20150901032920p:plain

最後に

IEの普及率はやや下がっていますが,それでも他のブラウザには負けないほどの普及率なのに,
まだこういう機能を使えるようにならないのでしょうか?

でもWindows10に標準搭載されているEdgeでは結構対応しているらしいです!
私の環境では,type="date"は機能してくれました!

私は,この間SafariからCanaryに若干乗り換えました!
でもCanaryは若干たまに難点があるので困りモノです.

世界ブラウザシェアランキング

f:id:nanashinodonbee:20150901033802p:plain

やっぱり世界はちゃんと現実をみていますね!

日本ブラウザシェアランキング

f:id:nanashinodonbee:20150901033804p:plain

未だにIE使いがどうやら多いようです.
現実を見ましょう?この間IEがなんとかってあったじゃん...

画像の方をお借りいたしました.
引用:ソフトウェアテスト・第三者検証ならウェブレッジ | 体験を科学する