2015.02.23
超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker
あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。
ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！
▼サンプルページ
jQuery-ui-datepickerのサンプル画面
そもそも「jQuery ui Datepicker」とは？
jQuery ui Datepickerとは「jQuery UI」の中にある1つの機能です。「jQuery UI」とは、jQueryをベースに構築されたユーザーインターフェースに関する機能をまとめたライブラリのことで、その1つ1つの機能は「アクション」「ウィジェット」「エフェクト」などのカテゴリに分類されます。「jQuery UI」の導入はとても簡単で、ライブラリにリンクするコードを記述するだけです。導入することでドラッグ&ドロップなど複雑なユーザーインターフェースを簡単に導入することが出来ます。
そして「jQuery ui Datepicker」は「ウィジェット」カテゴリーにあるカレンダー機能のことで、手間のかかる日付入力を直感的にすることができます。
導入方法
jQuery ui Datepickerはデザイン性と機能性に優れていますが、その導入方法はとても簡単です！以下が導入に関する主なステップです。
- jQueryを導入する
- jQuery UIを導入する
- カレンダーのテーマを決める
- 実装用コードを記述する
早速、1つずつ見て行きましょう！
STEP1 : jQueryを導入する
まず初めに、jQueryを導入しましょう(既に導入済みの方は次のステップにお進み下さい)！jQuery公式サイトへアクセスし、jQuery本体をダウンロードしてHTMLファイルのヘッダー内(<head>～</head>)に下記コードを記述してファイルを読み込んでください。※下記の例では、HTMLファイルから見て「js」フォルダ内にあるjQuery本体「jquery-1.9.1.min.js」を読み込んだ例です。あなたのサイト構造に合わせて適宜ご調整ください。
|
1 |
<script src="js/jquery-1.9.1.min.js"></script> |
もしくはGoogleで配布されているjQuery本体を下記コードを記述することで読み込むことも可能です。こちらの方が導入自体は簡単かもしれませんね！
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
STEP2 : jQuery UIを導入する
続いて、jQuery UIを導入しましょう！jQueryの本体と同じく、HTMLファイルのヘッダー内(<head>～</head>)に下記コードを記述することで「jQuery UI」と「jQuery ui Datepicker」を導入することができます。
|
1 2 |
<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> |
STEP3 : カレンダーのテーマを決める
続いて、カレンダーのテーマを決めるのですがその前に！HTMLファイルのヘッダー内に下記コードを記述してCSSファイルを読み込みましょう。下記コードを記述することでカレンダーにデザインが適応されます。
|
1 |
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" > |
上記コードを記述したら、最後はあなたがお好きなテーマを選んで下さい。jQuery UI公式サイトのテーマページにアクセスし、左側にあるウィンドウの中の「Gallery」タブをクリックすると様々なテーマを見ることができます。
好きなテーマが決まったら、上記コードの「redmond」部分をそのテーマ名に置き換えます。例えばテーマ内の初めにあるオレンジの「UI lightness」というテーマを使用する際は下記のように記述します。
|
1 |
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" > |
このようにテーマ名を変えるだけで適応するCSSを簡単に変更できます！
STEP4 : 実装用コードを記述する
最後に、実際にカレンダーを動作させるためのコードを記述しましょう！まずはヘッダー内に下記コードを記述してください。
|
1 2 3 4 5 |
<script> $(function() { $("#datepicker").datepicker(); }); </script> |
続いて日付入力欄のinput要素に「datepicker」というIDを付与します。
|
1 |
<input type="text" id="datepicker"> |
それぞれのコードを記述したら試しに日付入力欄をクリックしてみてください。サンプル画面の例1のようにカレンダーが表示されたら成功です！
しかし、フォームのユーザビリティを考えると、入力欄の横にカレンダーのアイコンがあって、そのボタンをクリックすることでカレンダー表示をすることの方が分かりやすいですよね？その場合は「showOn」というパラメータを利用することで可能になります。例えば下記コードを記述することで日付入力欄の横にカレンダーアイコン(アイコンは自作)を表示し、それをクリックすることでカレンダーを呼び出すことができます。
|
1 2 3 4 5 6 7 8 |
<script> $(function() { $("#datepicker").datepicker(); $("#datepicker").datepicker("option", "showOn", 'button'); $("#datepicker").datepicker("option", "buttonImageOnly", true); $("#datepicker").datepicker("option", "buttonImage", 'ico_calendar.png'); }); </script> |
上記コード4行目にある「showOn」に’button’を設定すると、カレンダーをボタンをクリックすることで呼び出します(サンプル画面の例2のように入力欄をクリックしても呼び出されません)。’both’を設定すると、ボタンと入力欄どちらをクリックしてもカレンダーを呼び出すことが出来ます(例3)。
5行目にある「buttonImageOnly」は、trueを設定することでボタン画像の周りの枠が消えます。6行目の「buttonImage」によってカレンダーアイコンを指定します(例4)。以上で「jQuery ui Datepicker」の導入が完了です！
まとめ
いかがでしたか？たった数行のコードを記述するだけで、「jQuery ui Datepicker」の導入ができました。日付入力をカレンダーにすることで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。
細かい所ですが、フォームのユーザビリティはコンバージョン率に大きく影響するのでぜひ改善したいですよね！
