jQuery【 jQuery UI 】datepickerのオプションと設定方法

jQuery UI の datepicker を利用すると 容易にカレンダーを表示することができます。
そして、datepicker には 様々なオプションが用意されており、オプションを設定することによって 表示するカレンダーをカスタマイズ可能です。
今回は、datepicker の 主なオプションについて、解説いたします。
（ カレンダーの表示についてはjQuery【 jQuery UI 】datepicker でカレンダーを表示するサンプルをご参照下さい。）

1. datepicker のオプション

　
datepicker を使用してカレンダーを表示させる場合、オプション無しで「 $(“#datepicker”).datepicker(); 」のような記述をすると 次のようなカレンダーが表示されます。

　
これだけでも十分かと思いますが、datepicker には 様々なオプションが用意されていて、オプションを設定することで 曜日を日本語で表示したり、カレンダーを複数月分表示させたりすることができます。

▲目次へ戻る

2. datepicker のオプションの書き方

　
datepicker のオプションを設定する場合は、次のように記述します。

$("#datepickerId").datepicker({
　　オプション名１ ： "値１" ，
　　オプション名２ ： "値２" ，
　　オプション名３ ： "値３"
});

次のようにオプションを設定すると、下のようなカレンダーが表示されます。

$("#datepickerId").datepicker({
  changeMonth: true,
  numberOfMonths: 3
});

▲目次へ戻る

3. datepicker のオプション一覧

　
datepicker は、主に次のようなオプションがあります。

▲目次へ戻る

4. まとめ

jQuery UI の datepicker の主なオプションについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る