【日本語対応】Datepickerを使って予約フォームにカレンダー式日付選択を入れる方法【jQuery】
予約・お問い合わせフォームに日付選択項目を導入したい。
日付選択項目はカレンダーをポップアップでだし、曜日を選択できるようにしたい。
日本語化に対応してるものを使いたい。
本記事ではjQuery UIライブラリのDatepickerプラグインを使ってこのような悩みを解決します。
Datepickerサンプル
See the Pen
datetimepicker by Kohei (@kouk05)
on CodePen.0
Datepickerのコードペンサンプルです。
テキストフィールドをクリックして頂くとカレンダーがポップアップし、日付を選択するとフィールドに入力されます。
導入方法は次章より説明します。
ライブラリを環境に読み込もう
<!-- datapicker用 jquery Ui CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- datapicker用 jquery ui js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Datepickerを使うには上記CDN・もしくはファイルを実装環境に読み込む必要があります。
任意の箇所に設置してください。
※jQuery・jQuery UIに関して既に設置されていれば追加する必要はありません。
実行関数を記述
jQuery(function() {
jQuery('#datepicker').datepicker({
});
});
上記コードがDatepickerを実行するjQueryコードになります。
スクリプト内に設置してください。
セレクタ（上記コード内の#datepicker部分）に日付選択をいれたいinput要素のIDを指定します。
以上で日付選択の導入は完了です。
Datepickerを日本語化しよう
<!-- datapicker用 日本語 -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
Datepickerはデフォルトだと英語仕様なので上記CDNを追加する事で日本語化されます。
カスタムオプション
Datepickerには様々オプションが用意されていて、日付選択をカスタマイズできます。
よく使うオプションを以下に記載します。
本日より過去の日付を選択できないようにする
jQuery('#datepicker01').datepicker({
minDate: 0
});
本日より過去の日付を選択出来ないようにするにはminDateオプションを追加し、値を0にします。
入力される日付のフォーマットを変更したい
jQuery('#datepicker01').datepicker({
dateFormat: 'yy年mm月dd日',
});
入力される日付のフォーマットをデフォルトのスラッシュで区切られてるのから年月日に変更したい場合はdateFormatプロパティを使います。
dateFormatの値にyyを入れると年、mmを入れると月、ddを入れると日が出力されます。
間に任意の文字列を差し込めます。
まとめ
Datepickerを使えば簡単に日付選択が可能になり、html・phpでカスタム可能な様々なメーラーにも対応できます。
ぜひ使ってみてください。
以上で解説を終わります。
