BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
お問い合わせフォームなどで日付の選択を入れることはありますよね。
その際にユーザーに入力をしてもらえるようにユーザビリティを上げることが大切です。

そこで便利な機能が「datepicker」になります。

「datepicker」は、jQuery UIのライブラリにある機能の1つで高機能なカレンダーを生成&表示することができます。
日付のフォーマットなど多彩なカスタマイズができるオプション設定や、日本語化なども可能なので自分好みのカレンダーを作れるのが特徴です。

今回はdatepickerとは何か?datepickerの使い方などをご紹介します。

datepickerとは?

例えば、Webページやお問い合わせフォームで日付を選択すると小さなカレンダーが表示される時があるかと思います。
それらはdatepickerで呼び出されています。
高機能なカレンダーを生成したり、表示したりすることができるということはユーザーにとって見やすくて使いやすい機能になります。
自分でカレンダー機能を作成するには技術と時間がかかります。
すぐに実装できる「datepicker」はWEB制作者の強力な味方になってくれることでしょう!

基本的な使い方

① まずはdatepickerに必要なライブラリjQueryをscriptタグで読み込みます。

② jQueryUIテーマのCSSを読み込みます。

③ inputタグにtype=”text”を記述します。

④ datepicker()関数で、datepickerを実装します。

デモページ

See the Pen
wvJBajV
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

datepickerのオプション設定

オプション設定の一覧

datepicker()メソッドのパラメータにオプションを指定することで、オリジナルのカレンダーを表示することができます。
しかし、オプションを設定しない場合はデフォルトの設定でカレンダーが表示されます。

パラメータの各種オプションは下記となります。

datepickerを日本語化する

datepickerはデフォルト状態だとすべての表記が「英語」になっています。

しかし、表記を変更できるオプションが用意されているので、簡単に日本語化ができます。
下記ファイルをscriptタグでHTMLに記述してください。

“https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js”

デモページ

See the Pen
bGqNVNE
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

まとめ

datepickerには多数のオプションが用意されており簡単にカスタマイズすることができるため、WEB制作初心者の方にも実装しやすいjQueryになっています。
また使いやすいUIにより、ユーザビリティの向上にも繋がり、日付入力率の向上にも繋がります。
カレンダー機能を追加したい場合は「datepicker」を積極的に使うといいでしょう!