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

米田

6年 ago

こんにちわ。
米田です。

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

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

目次／このページでわかること

完成形

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

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

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

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

実装

必要なjsファイルは以下の２つ。公式サイトからファイルをダウンロードするか、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サイトを考察しています。
フォームは反応に直接繋がる非常に大事なコンテンツです。
自身のサイトのフォームは使いやすいですか？確認してみましょう。

それでは。