こんばんは。ウチダユウマです。本日はJ-Query UIで以下のようなカレンダー日付入力フォームを簡単に実装する方法を紹介します。
目次
目的
カレンダー入力を実装する目的はユーザビリティーの向上です。日付をフォームに入力するのはめんどくさいですよね？日付じゃなくてもめんどくさいです。
だからここを簡単にすることでユーザーの離脱率を下げて、会員登録数の上昇につなげる事が目的です。
j-Query UIを使う準備
j-Query自体を使えるようにする
j-Queryを使うにはソースコードの<head>~</head>の間に以下のコードを記述する必要があります。ここは作業的にこなしましょう。
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head>
j-Query UIの使用コードを入力
次にj-Query UIを使うためのコードを入力していきます。Googleが共通のライブラリとして提供してくれているので、以下のコードを<head>タグ内に書き込めばOKです。
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> </head>
j-Query UIのデザインを決める
カレンダーの種類が多数あるので、お好きなデザインを決めてください。下記リンクにサンプル集があるので、好きなデザインを決めます。
http://jqueryui.com/themeroller/
デザインを決めたら下記コードの◯◯◯部分にデザイン名を入れてください。その際の注意点として、テーマ名にスペースが入っている場合はハイフン(-)をスペースの代わりに入れます。また、大文字は全て小文字に変換して入力します。
例として、「UI Lightness」だったら「ui-lightness」とします。
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/◯◯◯/jquery-ui.css" rel="stylesheet" />
テーマ名の挿入が完了したらこれまでと同じように<head>タグ内に挿入します。
インプットフォームへの適用
準備ができたら実際のインプットフォームに適用していきます。適用する際にはidを利用します。
<input type="text" id="datepicker">
その後<body>タグのどこでもいいので以下のコードを貼り付けます。
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker();
});
</script>
以上のコードを貼り付けるだけでそのフォームをクリックするとカレンダーが現れます。
スマートフォンからのフォーム入力は簡略化することが必須だと考えていますので、みなさんも試してみてください。
＊はね丸のWEB工房様を参考にさせていただきました。