ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

フォームから離脱させないために日付指定をカレンダーで実装。「Datepicker」のご紹介。

こんにちわ。
米田です。

前回、ストレスフリーなWebサイトを考察しました。
コーディングで考えるストレスフリーなWebサイト

今回は「フォーム」にフォーカスしてさらに使いやすいWebサイトを目指します。
日付指定を簡単に入力することができるjQueryプラグインの「Datepicker」をご紹介します。

完成形

See the Pen OGmJeo by epauoh (@epauoh) on CodePen.dark

実際にさわってみると、パソコンでもスマホでも非常に入力しやすいことがわかると思います。

HTML5でもデフォルトでカレンダー機能があるものの、IEとSafariが非対応です。
Datepickerではあらゆるブラウザに対応しているのが大きな利点の1つです。

また、その実装方法も驚くほど簡単なのです。

実装


必要なjsファイルは以下の2つ。
公式サイトからファイルをダウンロードするか、CDNで読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

そして同様にcssファイルも1つ読み込みます。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

そしてカレンダーを表示させたい要素に任意のid名を指定します。

<input type="text" id="calendar">

js側では、以下を指定。
#calendarは先ほど指定した任意のid名です。

$('#calendar').datepicker();

なんとこれだけ!!
数秒で実装できてしまいました。

テーマ

カレンダーの見た目も簡単に変更することができます。
上で読み込んだcssファイルのredmondの部分がテーマ名になります。
下記のサイトから任意のテーマを選びます。

テーマ

左のサイドバーの「Gallery」をクリックするとテーマの一覧がでてくるので、
お好きなテーマの名前を指定します。

例えば、「sunny」というテーマを使用する場合は、読み込むcssファイルを以下に変更します。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css">

オプション

追加機能も充実していて、自由にカスタマイズが可能です。

$("#calendar").datepicker({
    オプション名: "値",
    オプション名: "値",
    オプション名: "値"
});

主要オプション一覧

showButtonPanel
true/false
カレンダー最下部に「Today」「Done」ボタンを追加する
closeText 「Done」ボタンの表示名を変更する
changeMonth
true/false
「月」をドロップダウンリストから選択できるようにする
changeYear
true/false
「年」をドロップダウンリストから選択できるようにする
dateFormat 指定の日付フォーマットで出力する
例:mm年dd月yy日
firstDay
0〜6
週の最初の曜日を設定する
showOtherMonths
true/false
前後の月の日付も一緒に表示するかどうかを設定する

以下のjsファイルを追加することで、日本語化も可能です。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>

最後に

前回に引き続きユーザーにストレスを感じさせないWebサイトを考察しています。
フォームは反応に直接繋がる非常に大事なコンテンツです。
自身のサイトのフォームは使いやすいですか?確認してみましょう。

それでは。