Wie ändere ich den DatePicker der jQuery-Benutzeroberfläche so, dass nur Monat und Jahr angezeigt werden?

DatePicker der jQuery-Benutzeroberfläche so ändern, dass nur Monat und Jahr angezeigt werden

In Webanwendungen kann die dynamische Anzeige interaktiver Datumsselektoren von entscheidender Bedeutung sein. jQuery UI bietet zu diesem Zweck ein vielseitiges DatePicker-Plugin. Es kann jedoch Szenarien geben, in denen Sie lieber nur den Monat und das Jahr anzeigen möchten, ohne das Kalenderraster selbst.

Um einem solchen Bedarf gerecht zu werden, untersuchen wir einen JavaScript-Hack, der das DatePicker-Verhalten ändert:

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

Im bereitgestellten Code-Snippet spielt der onClose-Callback eine entscheidende Rolle. Wenn das Datumsauswahlfeld geschlossen ist, wird sichergestellt, dass nur die ausgewählten Monats- und Jahreswerte im Eingabefeld angezeigt werden. Anstatt einen bestimmten Tag auszuwählen, setzt die Methode setDate() das Datum der Eingabe auf den ersten Tag des ausgewählten Monats und Jahres.

Um die Änderung abzuschließen, müssen Sie die Datumsauswahl mithilfe von CSS formatieren Blenden Sie das Kalenderraster aus:

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

Mit diesen JavaScript- und CSS-Anpassungen können Sie jQuery UI DatePicker effektiv verwenden, um nur Monats- und Jahresoptionen anzuzeigen und so den speziellen Anforderungen der Benutzeroberfläche in Ihrem Unternehmen gerecht zu werden Anwendung.

Das obige ist der detaillierte Inhalt vonWie ändere ich den DatePicker der jQuery-Benutzeroberfläche so, dass nur Monat und Jahr angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!