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

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

こんばんは。ウチダユウマです。本日はJ-Query UIで以下のようなカレンダー日付入力フォームを簡単に実装する方法を紹介します。

スクリーンショット 2016-06-05 20.00.35

目的

カレンダー入力を実装する目的はユーザビリティーの向上です。日付をフォームに入力するのはめんどくさいですよね?日付じゃなくてもめんどくさいです。

だからここを簡単にすることでユーザーの離脱率を下げて、会員登録数の上昇につなげる事が目的です。

j-Query UIを使う準備

j-Query自体を使えるようにする

j-Queryを使うにはソースコードの<head>~</head>の間に以下のコードを記述する必要があります。ここは作業的にこなしましょう。

 

j-Query UIの使用コードを入力

次にj-Query UIを使うためのコードを入力していきます。Googleが共通のライブラリとして提供してくれているので、以下のコードを<head>タグ内に書き込めばOKです。

 

j-Query UIのデザインを決める

カレンダーの種類が多数あるので、お好きなデザインを決めてください。下記リンクにサンプル集があるので、好きなデザインを決めます。

http://jqueryui.com/themeroller/

デザインを決めたら下記コードの◯◯◯部分にデザイン名を入れてください。その際の注意点として、テーマ名にスペースが入っている場合はハイフン(-)をスペースの代わりに入れます。また、大文字は全て小文字に変換して入力します。

例として、「UI Lightness」だったら「ui-lightness」とします。

 

テーマ名の挿入が完了したらこれまでと同じように<head>タグ内に挿入します。

 

インプットフォームへの適用

準備ができたら実際のインプットフォームに適用していきます。適用する際にはidを利用します。

その後<body>タグのどこでもいいので以下のコードを貼り付けます。

以上のコードを貼り付けるだけでそのフォームをクリックするとカレンダーが現れます。

 

スマートフォンからのフォーム入力は簡略化することが必須だと考えていますので、みなさんも試してみてください。

 

はね丸のWEB工房様を参考にさせていただきました。

LINE@

この記事をシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です