こんにちは！WEBデザイナーのこたです。
WEBサイトにはフォームが必須ですよね。
その中で、日付を入力する項目を付け加える場合もあります。
日付入力を入れるのもいいけど、ユーザー目線で考えると、入力をなるべくラクにしてあげたいと思いますよね。
コンバージョンの離脱率にも繋がりますので、なるべくユーザーファーストで作成していきましょう。
今回は日付入力でカレンダー機能を実装する方法をご紹介いたします。
【Datepicker】カレンダーライブラリを使用しよう
でも、カレンダー機能なんてJavaScriptの知識がないとできないんでしょ？
そんなことはないんです！
実はjQueryのライブラリでカレンダー機能を簡単に実装できる方法があります。
jQuery UI Datepicker
こちらのライブラリを読み込むことで簡単にカレンダー機能を実装できます。
では、さっそく下記URLから【jQuery UI Datepicker】をダウンロードしてみましょう。
実装の流れ
- 「Download」ボタンからZIPファイルをダウンロード
- ZIPファイルの中の「jquery-ui.js」と「jquery-ui.css」をプロジェクトファイルに入れる
- HTMLの<head>の中で❷とjQueryを読み込む
- JavaScriptの記述を追加する
デモサイト
下記デモの入力欄をクリックしてみてください。
カレンダーが表示されるはずです。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
JavaScriptの記述はこれだけでOK！
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
まとめ
いかがでしたでしょうか？
思った以上に簡単でしたよね。
これならWEB制作初心者の方にも実装できるので、フォームをこれから作成する際に役立てていただけたら嬉しいです。
Datepickerは他にも色を変えたり、日本語や英語設定など様々なカスタマイズができるので、もっとデザインを凝りたい場合はそちらも調べてみてはいかがでしょうか！
最後までご視聴いただきありがとうございました。
