suchen

Heim >Web-Frontend >js-Tutorial >Wie kann ich mit jQuery UI DatePicker nur Monat und Jahr anzeigen?

Wie kann ich mit jQuery UI DatePicker nur Monat und Jahr anzeigen?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-30 20:51:18442Durchsuche

How Can I Display Only Month and Year Using jQuery UI DatePicker?

Monat und Jahr mit jQuery UI DatePicker anzeigen

Die jQuery UI DatePicker-Komponente ist ein vielseitiges Tool zum Anzeigen von Kalendern in Webanwendungen. Es gibt jedoch Fälle, in denen es wünschenswert sein kann, nur den Monat und das Jahr anzuzeigen und das Kalenderraster wegzulassen. Dies kann durch einen cleveren Workaround erreicht werden.

Erstellen einer „Nur Monat, Jahr“-Anzeige

Der folgende Codeausschnitt bietet eine Lösung:

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

Dieses Skript konfiguriert die Datumsauswahl mit bestimmten Einstellungen:

  • changeMonth und changeYear: Ändern von Monat und Jahr aktivieren.
  • showButtonPanel: Eine Schaltfläche anzeigen Panel für Monats- und Jahresnavigation.
  • dateFormat: Geben Sie das gewünschte Format nur für Monat und Jahr als „MM JJ“ an.
  • onClose: Beim Schließen der Auswahl wird das ausgewählte Datum auf den ersten Tag des ausgewählten Monats und Jahres gesetzt.

Kalenderraster ausblenden

Um das Kalenderraster auszublenden, fügen Sie das folgende CSS hinzu Regel:

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

Vollständiges HTML-Beispiel

Hier ist eine überarbeitete Version der HTML-Datei mit allen notwendigen Elementen:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date : < /label>
    <input name="startDate">

Dies Die überarbeitete Lösung bietet eine Benutzeroberfläche, die es Benutzern ermöglicht, einen Monat und ein Jahr auszuwählen, ohne das Kalenderraster anzuzeigen.

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

jquery css html for select date format Calendar using Interface this display ui
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ist JavaScript wirklich asynchron oder nur größtenteils synchron?Nächster Artikel：Ist JavaScript wirklich asynchron oder nur größtenteils synchron?

In Verbindung stehende Artikel

Mehr sehen