jQuery UI DatePickerを変更して月と年のみを表示する方法は?

月と年のみを表示するように jQuery UI DatePicker を変更する

Web アプリケーションでは、インタラクティブな日付セレクターを動的に表示することが不可欠な場合があります。 jQuery UI は、この目的のために多用途の DatePicker プラグインを提供します。ただし、カレンダー グリッド自体を使用せずに、月と年だけを表示したいというシナリオもあるでしょう。

そのようなニーズに応えるために、DatePicker の動作を変更する JavaScript ハックを検討してみましょう。

$('.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));
  }
});

提供されたコード スニペットでは、onClose コールバックが重要な役割を果たします。日付ピッカー パネルを閉じると、選択した月と年の値のみが入力フィールドに反映されます。 setDate() メソッドは、特定の日を選択する代わりに、入力の日付を選択した月と年の最初の日に設定します。

変更を完了するには、CSS を使用して日付ピッカーのスタイルを設定する必要があります。カレンダー グリッドを非表示にします:

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

これらの JavaScript と CSS の調整により、jQuery UI DatePicker を効果的に使用して、月と年のオプションのみを表示し、専門的なニーズに対応できます。アプリケーション内のユーザー インターフェイス要件。

以上がjQuery UI DatePickerを変更して月と年のみを表示する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。