jQuery UI DatePicker で月と年だけを表示するにはどうすればよいですか?

jQuery UI DatePicker で月と年のみを表示する

jQuery UI DatePicker は、Web アプリケーションでカレンダーを表示するための多用途ツールです。このプラグインを使用して、カレンダー全体ではなく、月と年だけを表示したい場合は、次の方法で実行できます:

賢い解決策には、HTML と JavaScript コードをわずかに変更する必要があります。 HTML で、月と年を表示する入力フィールドにカスタム クラスを追加します。 JavaScript コードで、このクラスを使用して、DatePicker 構成に必要なオプションを追加します。

具体的には、必要なオプションは次のとおりです。

• changeMonth: 月の変更を許可します
• change Year: 年の変更を許可します
• showButtonPanel: 「Done」でボタン パネルを表示し、 「今日」ボタン
• dateFormat: 出力形式を「MM yy」として指定します (例、5 月 10 日)
• onClose: 選択した月と年で入力フィールドを更新するコールバック関数

カレンダーが表示されないようにするには、CSS スタイルを追加してカレンダー要素を非表示にします(ui-datepicker-calendar).

完全な例は次のとおりです:

<label for="startDate">Date:</label>
<input name="startDate">

$('.date-picker').datepicker({
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy',
  onClose: function(dateText, inst) {
    $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
  }
});

.ui-datepicker-calendar {
  display: none;
}

このハックにより、jQuery UI に月と年のみを表示できるようになります。 DatePicker の機能に影響を与えることはありません。

以上がjQuery UI DatePicker で月と年だけを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。