【jQuery】【Datepicker】カレンダーの状態で表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryのdatepickerをページ読み込み時にカレンダーの状態で表示する方法をご紹介しています。デフォルトのinputではなくカレンダーで表示したい場合に有効です。

上記の疑問にお答えします。

では、解説していきます。

Datepickerをカレンダーの状態で表示するには

input以外の要素でDatepickerを実行すると、カレンダーの状態で表示されます。

input要素にDatepickerをデフォルトのまま実行すると、下記の表示になります。inputをフォーカスした際にカレンダーがフェードインで表示されます。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

これをinput要素以外の要素でDatepickerを実行すると、下記の表示になります。

See the Pen 7808 by ryohei (@intotheprogram) on CodePen.

inputをクリックしたりする必要はなく、カレンダーの状態で表示されていますね。

Datepickerをカレンダーの状態で表示するサンプル

DatepickerはjQueryとjQuery UIの2つのライブラリを使用します。そのためDatepickerを実行するページでは、予め下記スクリプトファイルを読み込む必要があります。

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

上記をページに読み込み後、下記のようにHTMLとjQueryを記述します。

HTML

<div id="datepicker"></div>

jQuery

$("#datepicker").datepicker();

実行すると下記の通りカレンダーが表示されます。

See the Pen 7808 by ryohei (@intotheprogram) on CodePen.

これでDatepickerをカレンダーの状態で表示することができます。

参考：https://api.jqueryui.com/datepicker/

最後に

JavaScriptにもカレンダーを実装するためのライブラリは数多くありますが、やっぱりjQueryのDatepickerで実装するのがシンプルで良いですね。JavaScript（Vanilla JS）でも似たような使用感のライブラリがあるはずなので、時間あるときに探して良いかもしれないですね。

以上、jQueryのDatepickerをカレンダーの状態で表示する方法のご紹介でした！