Wie werden im DatePicker der jQuery-Benutzeroberfläche nur Monat und Jahr angezeigt?-js-Tutorial-php.cn

Wie werden im DatePicker der jQuery-Benutzeroberfläche nur Monat und Jahr angezeigt?

Susan Sarandon

Freigeben： 2024-11-26 17:09:14

Original

412 Leute haben es durchsucht

How to Display Only Month and Year in jQuery UI DatePicker?

Anzeige von Monat und Jahr nur im DatePicker der jQuery-Benutzeroberfläche

Das DatePicker-Plugin der jQuery-Benutzeroberfläche bietet die Flexibilität, sein Erscheinungsbild anzupassen. In Szenarien, in denen die Anzeige des vollständigen Kalenders nicht erforderlich ist, möchten Benutzer möglicherweise nur den Monat und das Jahr anzeigen.

Lösung:

Um dies zu erreichen, ist ein „Hackish „Der funktionale Ansatz beinhaltet jedoch das programmgesteuerte Ausblenden der Kalenderkomponente und das Ändern der JavaScript-Konfiguration. Hier ist ein Beispiel:

<html>
<head>
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <script>
        $(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));
                }
            });
        });
    </script>
    <style>
        .ui-datepicker-calendar {
            display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date:</label>
    <input name="startDate">

Nach dem Login kopieren

Dieser Ansatz deaktiviert die Sichtbarkeit des Kalenders, während die Funktionalität zur Monats- und Jahresauswahl erhalten bleibt. Der onClose-Ereignishandler passt das ausgewählte Datum an den ersten Tag des ausgewählten Monats und Jahres an und stellt so sicher, dass nur der Monat und das Jahr im Eingabefeld angezeigt werden.

Erweiterte Lösungen:

Im Laufe der Zeit sind verfeinerte Lösungen entstanden, die potenzielle Nachteile des ursprünglichen Ansatzes beheben. Eine solche Lösung besteht darin, die _selectDay-Methode der jQuery-Benutzeroberfläche zu überschreiben, um zu verhindern, dass Kalendertage ausgewählt werden können. Dieser Ansatz ermöglicht eine robustere Handhabung der Datumseingabe und bietet gleichzeitig die gewünschte Monats- und Jahresanzeige.

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