Datepicker / カレンダー

テキスト入力欄に、カレンダーから、日付を入力できるようにするには、jQuery UI の Datepicker が便利だ。

• jQuery UI の Datepicker プラグイン

  jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。テキスト入力欄をクリックすると、今月のカレンダーが現れる。カレンダーの日付をクリックすると、その日付を、テキスト入力欄に入力する。

• カレンダーから入力した日付のフォーマットを変更

  jQuery UI の Datepicker プラグインを使い、カレンダーからテキスト入力欄に入力した、日付のフォーマットを、ドロップダウンリストで選択したフォーマットに変更する方法。

• Datepicker のカレンダーで選択できる日付の範囲を設定

  jQuery UI の Datepicker プラグインについての記事。Datepicker プラグインは、テキスト入力欄に、カレンダーから、日付を入力できるようにするプラグイン。選択できる日付の範囲を設定したい場合は、minDate オプションと、maxDate オプションを使う。

• jQuery UI の Datepicker プラグインのカレンダーを日本語化

  jQuery UI の Datepicker プラグインにおいて、カレンダーと、テキスト入力欄の日付のフォーマットを、日本語にローカライズする方法。ローカライズ用の JavaScript ファイルは、i18n フォルダに入っている。日本語以外も、たくさん用意されている。

• jQuery UI の Datepicker のカレンダーを選択言語にローカライズ

  jQuery UI の Datepicker プラグインにおいて、カレンダーと、テキスト入力欄の日付のフォーマットを、ドロップダウンリストで選択した言語にローカライズする方法。ローカライズ用の JavaScript ファイルは、i18n フォルダに入っている。ここで紹介している言語以外も、たくさん用意されている。

• カレンダーから２つの入力欄に別々の書式の日付を入力

  jQuery UI の Datepicker プラグインにおいて、カレンダーから、２つのテキスト入力欄に、別々のフォーマット（書式）の日付を入力するするには、altField と、altFormat オプションを使う。プログラムに送信したい書式の入力欄を追加したり、視覚的にわかりやすい書式の入力欄を追加したりする場合に便利だ。

• Datepicker のカレンダーに「今日」と「閉じる」のボタンを出現

  jQuery UI の Datepicker プラグインにおいて、カレンダーに、「今日」ボタンと、「閉じる」ボタンを出現させる方法。「今日」ボタンを押すと、今日を含む今月のカレンダーになる。「閉じる」ボタンを押すと、カレンダーを閉じる。「今日」ボタンと、「閉じる」ボタンを出現させるには、showButtonPanel オプションを使う。

• Datepicker のカレンダーに月と年のドロップダウンリスト移動

  jQuery UI の Datepicker プラグインにおいて、カレンダーに月と年のドロップダウンリストを表示させるには、changeMonth オプションと changeYear オプションを使う。月と年のドロップダウンリストから月や年を選択すると、その月や年のカレンダーになる。

• カレンダーに余剰部分があれば前月次月の日を表示

  jQuery UI の Datepicker プラグインのカレンダーにおいて、カレンダー1週目に余剰部分があれば、前月の日を表示させ、カレンダー最終週に余剰部分があれば、次月の日を表示させ、選択できるようにする方法。showOtherMonths と selectOtherMonths オプションを使う。

• Datepicker のカレンダーの左列に、その年の何週目かを表示

  jQuery UI の Datepicker プラグインにおいて、カレンダー内の左の列に「週」の列を追加し、その年の何週目かを表示させる方法。showWeek オプションを使う。

• jQuery UI の Datepicker のカレンダーの週の最初の曜日を設定

  jQuery UI の Datepicker プラグインにおいて、カレンダーの週の最初の曜日を設定する方法。firstDay オプションを使う。日曜日始まりは「0」、月曜日始まりは「1」、火曜日始まりは「2」…を設定する。

• jQuery UI の Datepicker のカレンダーを複数月分表示

  jQuery UI の Datepicker プラグインにおいて、複数月のカレンダーを表示する方法。カレンダーを複数月分表示させるには、numberOfMonths オプションを使う。２か月分表示させるには、「2」を設定し、３か月分表示させるには、「3」を設定する。

• カレンダーアイコンをクリックすることで、カレンダーを表示

  jQuery UI の Datepicker プラグインにおいて、カレンダーアイコンをクリックすることで、カレンダーを表示させる方法。アイコンで、カレンダーを表示させるには、buttonImage オプションを使う。

• jQuery UI の Datepicker のカレンダーをアニメーション動作で開閉

  jQuery UI の Datepicker プラグインにおいて、カレンダーを開いたり閉じたりするときの、アニメーション動作を、設定する方法。showAnim オプションを使う。

• 日付のフォーマットに応じて入力欄の大きさを自動変更

  jQuery UI の Datepicker プラグインにおいて、カレンダーからテキスト入力欄（フィールド）に入力した日付のフォーマットを、ドロップダウンリストで選択したフォーマットに変更し、フォーマットに応じて、入力欄の大きさを自動的に変更する方法。

• jQuery UI の Datepicker のカレンダーによる日付範囲指定フォーム

  jQuery UI の Datepicker プラグインのカレンダーを使った、日付範囲指定フォーム。