【JavaScript】カレンダーから日付選択できる入力フォームの作り方

jQueryのDatepickerを使うと少ない記述でカレンダーから日付を選択するUIが簡単に実現可能です。

この記事ではDatepickerの使い方について解説していきます。

【参考】Datepickerの公式リファレンス

基本の使い方

Datepickerを使うには「jQuery」「jQueryUI」のライブラリを利用できるようにする必要があります。

htmlのheadタグにそれぞれ以下の記述を追加しましょう。

■jQuery
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

■jQuery UI（javaScript）
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>

■jQuery UI（CSS）
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">

バージョンは2024年時点の最新バージョンになります。

お使いの環境に合わせて適宜書き換えてください。

続いて日付選択の入力欄を用意します。

htmlのbodyタグに以下のコードを追加してください。

例としてidはdateとしていますが、こちらは自由に書き換えてもらって大丈夫です。

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

最後にカレンダーを表示するjavaScript処理を用意します。

先ほどhtmlに追加したidがdateの要素に対してdatepickerの処理を呼ぶように記述します。

javaScriptファイルまたはhtmlのscriptタグに以下のコードを追加してください。

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

これまでの手順で完成したソースがこちらになります。

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

Datepickerにはさまざまなオプションが存在し、カスタマイズが可能です。

よく使われるオプションの一例を紹介します。

onSelectは日付が選択されたときに実行する関数を定義できます。

たとえば選択した日付をラベル表示するサンプルは以下のとおりになります。

関数の第一引数には選択した日付が渡されます。

カレンダーを日本語化するにはいくつかのオプションを設定する必要があります。

次に紹介するサンプルでは以下の４つのオプションを使用した例です。

・yearSuffix‥‥‥年の後ろに続く文字列を指定する
・showMonthAfterYear‥‥‥ヘッダーの年と月の表示位置を入れ替える
・monthNames‥‥‥月の表示を指定する
・dayNamesMin‥‥‥曜日の表示を指定する

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

maxDateは選択可能な最大日付を、minDateは最小日付を指定します。

直接日付を指定することもできますし、数値のみの指定も可能です。

たとえば「+5」とした場合は当日から5日後の日付を、「-1m」とした場合は当日から1ヶ月前の日付を表します。

See the Pen Untitled by Usagi (@naniwa_usagi) on CodePen.

上記で紹介した以外にもDatepickerにはさまざまなオプションが存在しますので、是非公式のリファレンスも参考にしてみてください。