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

jQueryのdatepickerをカレンダーで表示したいんだけど、良い方法ないかな?
上記の疑問にお答えします。
では、解説していきます。
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をカレンダーの状態で表示することができます。
最後に
JavaScriptにもカレンダーを実装するためのライブラリは数多くありますが、やっぱりjQueryのDatepickerで実装するのがシンプルで良いですね。JavaScript(Vanilla JS)でも似たような使用感のライブラリがあるはずなので、時間あるときに探して良いかもしれないですね。
以上、jQueryのDatepickerをカレンダーの状態で表示する方法のご紹介でした!