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

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

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら