X

j-Query UIでカレンダー日付入力フォームを実装しよう

この記事は約 4 分で読めます。

こんばんは。ウチダユウマです。本日は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工房様を参考にさせていただきました。