Wie kann ich mit jQuery UI DatePicker nur Monat und Jahr anzeigen?-js-Tutorial-php.cn

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

Patricia Arquette

Freigeben： 2024-11-30 20:51:18

Original

385 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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">

Nach dem Login kopieren

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!