こんにちは、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をカレンダーの状態で表示するサンプル

DatepickerjQueryjQuery 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をカレンダーの状態で表示する方法のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。