Wie kann ich in einem jQuery-UI-DatePicker nur den Monat und das Jahr anzeigen?

Nur ​​Monat und Jahr im jQuery UI DatePicker anzeigen

jQuery UI DatePicker ist ein vielseitiges Tool zum Anzeigen von Kalendern in Webanwendungen. Wenn Sie dieses Plugin verwenden möchten, um statt des gesamten Kalenders nur den Monat und das Jahr anzuzeigen, gehen Sie wie folgt vor:

Eine clevere Lösung besteht in einer geringfügigen Änderung des HTML- und JavaScript-Codes. Fügen Sie im HTML eine benutzerdefinierte Klasse zum Eingabefeld hinzu, in dem Sie den Monat und das Jahr anzeigen möchten. Verwenden Sie im JavaScript-Code diese Klasse, um die erforderlichen Optionen zur DatePicker-Konfiguration hinzuzufügen.

Im Einzelnen benötigen Sie folgende Optionen:

• changeMonth: Änderung des Monats zulassen
• changeYear: Änderung des Jahres zulassen
• showButtonPanel: Schaltflächenfeld mit „Fertig“ und „Heute“ anzeigen Schaltflächen
• dateFormat: Geben Sie das Ausgabeformat als „MM yy“ an (z. B. 10. Mai)
• onClose: Eine Rückruffunktion, um das Eingabefeld mit dem ausgewählten Monat und Jahr zu aktualisieren

Um zu verhindern, dass der Kalender angezeigt wird, fügen Sie einen CSS-Stil hinzu, um das Kalenderelement auszublenden (ui-datepicker-calendar).

Hier ist ein vollständiges Beispiel:

<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;
}

Mit diesem Hack können Sie nur den Monat und das Jahr in der jQuery-Benutzeroberfläche anzeigen DatePicker ohne Beeinträchtigung seiner Funktionalität.

Das obige ist der detaillierte Inhalt vonWie kann ich in einem jQuery-UI-DatePicker nur den Monat und das Jahr anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!