wake-up-neo.net

jQuery UI DatePicker zeigt nur das Jahr des Monats an

Ich verwende die jQuery-Datumsauswahl, um den Kalender in meiner gesamten App anzuzeigen. Ich möchte wissen, ob ich damit den Monat und das Jahr (Mai 2010) und nicht den Kalender anzeigen kann.

363
Aanu

Hier ist ein Hack (aktualisiert mit der gesamten .html-Datei):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
    <script type="text/javascript">
        $(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" id="startDate" class="date-picker" />
</body>
</html>

EDIT jsfiddle für das obige Beispiel: http://jsfiddle.net/DBpJe/7755/

BEARBEITEN 2 Fügt den Monatswert nur dann zum Eingabefeld hinzu, wenn Sie auf die Schaltfläche Fertig klicken. Ermöglicht auch das Löschen von Eingabefeldwerten, was im obigen Feld http://jsfiddle.net/DBpJe/5103/ nicht möglich ist

EDIT 3 aktualisiert Better Solution basierend auf rexwolfs Lösung down.
http://jsfiddle.net/DBpJe/5106

414
Ben Koehler

Das Code funktioniert bei mir einwandfrei:

<script type="text/javascript">
$(document).ready(function()
{   
    $(".monthPicker").datepicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});
</script>

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

Ausgabe ist:

enter image description here

79

@ Ben Koehler , das ist Präfekt! Ich habe eine geringfügige Änderung vorgenommen, sodass die Verwendung einer einzelnen Instanz der Datumsauswahl mehr als einmal wie erwartet funktioniert. Ohne diese Änderung wird das Datum falsch analysiert und das zuvor ausgewählte Datum nicht hervorgehoben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
    <script type="text/javascript">
    $(function() {
        $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) { 
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
            beforeShow : function(input, inst) {
                var datestr;
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });
    });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
61
BrianS

Die obigen Antworten sind ziemlich gut. Meine einzige Beschwerde ist, dass Sie den Wert nicht löschen können, sobald er festgelegt wurde. Außerdem bevorzuge ich den Ansatz "Extend-JQuery-Like-A-Plugin".

Das funktioniert perfekt für mich:

$.fn.monthYearPicker = function(options) {
    options = $.extend({
        dateFormat: "MM yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: ""
    }, options);
    function hideDaysFromCalendar() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        // Also fix the click event on the Done button.
        $('.ui-datepicker-close').unbind("click").click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    }
    $(this).datepicker(options).focus(hideDaysFromCalendar);
}

Dann rufen Sie wie folgt auf:

$('input.monthYearPicker').monthYearPicker();
17
user1857829
<style>
.ui-datepicker table{
    display: none;
}
<script type="text/javascript">
$(function() {
    $( "#manad" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
});

Dies wird das Problem lösen =) Aber ich wollte das timeFormat yyyy-mm

Nur in FF4 ausprobiert

10
Erik Polder

Ich hatte heute das gleiche Bedürfnis und fand es auf Github, arbeitet mit jQueryUI und hat eine Monatsauswahl anstelle von Tagen im Kalender

https://github.com/thebrowser/jquery.ui.monthpicker

9
Anthony Shaw

Folgendes habe ich mir ausgedacht. Der Kalender wird ausgeblendet, ohne dass ein zusätzlicher Stilblock erforderlich ist, und es wird eine Schaltfläche zum Löschen hinzugefügt, um das Problem zu beheben, dass der Wert nicht gelöscht werden kann, sobald Sie auf die Eingabe klicken. Funktioniert auch gut mit mehreren Monatspickern auf derselben Seite.

HTML:

<input type='text' class='monthpicker'>

JavaScript:

$(".monthpicker").datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat: "yy-mm",
    showButtonPanel: true,
    currentText: "This Month",
    onChangeMonthYear: function (year, month, inst) {
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
    },
    onClose: function(dateText, inst) {
        var month = $(".ui-datepicker-month :selected").val();
        var year = $(".ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
    }
}).focus(function () {
    $(".ui-datepicker-calendar").hide();
}).after(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);
8
Paul Richards

Fügen Sie eine weitere einfache Lösung hinzu

 $(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'M yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

http://jsfiddle.net/tmnasim/JLydp/
Funktionen :

  • nur Monat/Jahr anzeigen
  • Fügt den Monatswert nur dann zum Eingabefeld hinzu, wenn Sie auf die Schaltfläche Fertig klicken
  • Kein "Wiederöffnen" -Verhalten beim Klicken auf "Fertig"
    ------------------------------------
    eine andere Lösung, die für Datepicker und Monthpicker auf derselben Seite gut funktioniert:
    JS Fiddle Link
5
Chinh Phan

Ich habe viele der oben genannten guten Antworten kombiniert und bin zu folgendem Ergebnis gelangt:

    $('#payCardExpireDate').datepicker(
            {
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                onClose: function(dateText, inst) { 
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
                },
                beforeShow : function(input, inst) {
                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length-4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                        $(this).datepicker('setDate', new Date(year, month-1, 1));
                    }
                }
            }).focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

Dies hat sich als erfolgreich erwiesen, aber es gab viele Fehler, so dass ich gezwungen war, an mehreren Stellen mit Dattelpicker zu patchen:

if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
    $(".ui-datepicker-calendar").hide();
}

patch1: in _showDatepicker: um das Fell zu glätten;

patch2: in _checkOffset: um die Position der Monatsauswahl zu korrigieren (andernfalls ist die Versatzprüfung deaktiviert, wenn sich das Feld unten im Browser befindet);

patch3: in onClose von _hideDatepicker: sonst blinken beim Schließen die Datumsfelder für einen sehr kurzen Zeitraum, was sehr ärgerlich ist.

Ich weiß, dass meine Lösung alles andere als gut war, aber im Moment funktioniert sie. Ich hoffe es hilft.

5
rexwolf

Ich brauchte eine Monats-/Jahresauswahl für zwei Felder (Von & Bis), und als eines ausgewählt wurde, wurde das Maximum/Minimum für das andere festgelegt ... a la picking airline ticket dates. Ich hatte Probleme beim Einstellen von Max und Min. Die Daten des anderen Feldes wurden gelöscht. Dank einiger der oben genannten Beiträge ... habe ich es endlich herausgefunden. Sie müssen Optionen und Daten in einer bestimmten Reihenfolge festlegen.

Die vollständige Lösung finden Sie in dieser Anleitung: Month/Year Picker @ JSFiddle

Code:

var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
    searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
    dateFormat: "M yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    minDate: searchMinDate,
    maxDate: searchMaxDate,
    showButtonPanel: true,
    beforeShow: function (input, inst) {
        if ((datestr = $("#txtFrom").val()).length > 0) {
            var year = datestr.substring(datestr.length - 4, datestr.length);
            var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
        $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtFrom").datepicker('setDate', new Date(year, month, 1));
            var to = $("#txtTo").val();
            $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
            if (to.length > 0) {
                var toyear = to.substring(to.length - 4, to.length);
                var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
                $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
            }
        }
    });
    $("#txtTo").datepicker({
        dateFormat: "M yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        showAnim: "",
        minDate: searchMinDate,
        maxDate: searchMaxDate,
        showButtonPanel: true,
        beforeShow: function (input, inst) {
            if ((datestr = $("#txtTo").val()).length > 0) {
                var year = datestr.substring(datestr.length - 4, datestr.length);
                var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
                $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
                $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            }
        },
        onClose: function (input, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#txtTo").datepicker('setDate', new Date(year, month, 1));
            var from = $("#txtFrom").val();
            $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
            if (from.length > 0) {
                var fryear = from.substring(from.length - 4, from.length);
                var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
                $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
                $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
            }

        }
    });

Fügen Sie dies auch zu einem Stilblock hinzu, wie oben erwähnt:

.ui-datepicker-calendar { display: none !important; }
5
Amy Struck

Bin es nur ich oder funktioniert das nicht so, wie es im IE (8) sein sollte? Das Datum ändert sich, wenn Sie auf "Fertig" klicken. Der Datumsauswahlknopf wird jedoch wieder geöffnet, bis Sie tatsächlich auf eine Stelle auf der Seite klicken, um den Fokus auf das Eingabefeld zu verlieren.

Ich bin gerade dabei, das zu lösen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<script type="text/javascript">
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
4
Tom Van Schoor

nachdem ich jQueryUI.com nach Datepicker durchsucht habe, hier meine Schlussfolgerung und Antwort auf Ihre Frage.

Zuerst würde ich nein zu Ihrer Frage sagen. Sie können den jQueryUI-Datepicker nicht nur zum Auswählen von Monat und Jahr verwenden. Es wird nicht unterstützt. Dafür gibt es keine Rückruffunktion.

Aber Sie können es hacken, um nur Monat und Jahr anzuzeigen , indem Sie CSS verwenden, um die Tage usw. auszublenden. Und ich denke macht immer noch keinen Sinn, da Sie die Daten anklicken müssen, um ein Datum auszuwählen.

Ich kann sagen, Sie müssen nur einen anderen Datepicker verwenden. Wie das, was Roger vorschlug.

3
Reigel

Ich hatte das Problem, dass die Datumsauswahl mit der Monatsauswahl gemischt wurde. Ich habe es so gelöst.

    $('.monthpicker').focus(function()
    {
    $(".ui-datepicker-calendar").show();
    }).datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM/yy',
        create: function (input, inst) { 

         },
        onClose: function(dateText, inst) { 
            var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());           
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

        }
    });
3
PYT

Wenn Sie nach einer Monatsauswahl suchen, versuchen Sie dies jquery.mtz.monthpicker

Das hat bei mir gut funktioniert.

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);
3
user2630080

Wie viele andere bin ich auch bei diesem Versuch auf zahlreiche Probleme gestoßen, und nur eine Kombination der veröffentlichten Lösungen und schließlich ein großer Hack, um sie zu perfektionieren, hat mir eine Lösung geliefert .

Probleme mit anderen Lösungen in diesem Thread, die ich ausprobiert habe:

  1. Wenn Sie ein neues Datum in einem Datumsauswahlfenster auswählen, wird auch das (interne) Datum anderer Datumsauswahlfenster geändert. Wenn Sie also die anderen Datumsauswahlfenster erneut öffnen (oder versuchen, ihr Datum abzurufen), wird für sie ein anderes Datum als das in der zugewiesenen Eingabe angezeigte angezeigt -Feld.
  2. Der Datepicker "merkt" sich das Datum beim erneuten Öffnen nicht.
  3. Der Code zum Jonglieren der Daten verwendete Teilzeichenfolge, sodass er nicht mit allen Formaten kompatibel war.
  4. "My monthpicker" änderte das Eingabefeld nur beim Schließen und nicht immer dann, wenn die Werte geändert wurden.
  5. Das Eingabefeld wird nicht korrekt aktualisiert, wenn Sie eine falsch formatierte Eingabezeichenfolge für ein Datum eingeben und dann im Datumsfenster auf "Schließen" klicken.
  6. Ich kann keine normalen Datepicker haben, die die Tage auf derselben Seite anzeigen wie Monthpicker, die die Tage nicht anzeigen.

Ich habe endlich einen Weg gefunden, um all diese Probleme zu beheben . Die ersten vier können einfach behoben werden, indem Sie darauf achten, wie Sie Ihre Datums- und Monatsauswahl in ihrem internen Code referenzieren, und natürlich einige manuelle Aktualisierungen Ihrer Auswahl vornehmen. Dies sehen Sie in den Instanziierungsbeispielen unten. Das fünfte Problem kann durch Hinzufügen von benutzerdefiniertem Code zu den Datumsauswahlfunktionen behoben werden.

HINWEIS: Sie müssen die folgenden Monthpicker-Skripte NICHT verwenden, um die ersten drei Probleme in Ihrem normalen Datepicker zu beheben. Verwenden Sie einfach das Datepicker-Instantiierungsskript am Ende dieses Beitrags.

Um nun die Monatsauswahl zu verwenden und das letzte Problem zu beheben, müssen wir die Datumsauswahl und die Monatsauswahl trennen. Wir könnten eines der wenigen Monatsauswahl-Addons für jQuery-UI auf den Markt bringen, aber einigen mangelt es an Lokalisierungsflexibilität/-fähigkeit, anderen an Animationsunterstützung ... also, was tun? Würfeln Sie mit dem Datepicker-Code nach Ihrem "Eigenen"! Damit erhalten Sie einen voll funktionsfähigen Monthpicker mit allen Funktionen des Datepickers, nur ohne die Anzeige von Tagen.

Ich habe ein monthpicker js-script und das begleitendes CSS-script unter Verwendung der unten beschriebenen Methode mit dem Code jQuery-UI v1.11.1. Kopieren Sie diese Code-Schnipsel einfach in zwei neue Dateien, monthpicker.js und monthpicker.css.


Hier ist der Prozess, den ich durchlaufen habe, um den ursprünglichen Datepicker zu klonen und ihn zu einem Monthpicker zu machen

Wenn Sie sich nicht darum kümmern, wie ich diese erstellt habe, scrollen Sie über diesen Abschnitt und bis zur Zeile "Jetzt die Datums- und Monatswähler zur Seite hinzufügen!"

Ich habe den gesamten Javascript-Code aus jquery-ui-1.11.1.js übernommen, der sich auf den Datepicker bezieht, ihn in eine neue js-Datei eingefügt und die folgenden Zeichenfolgen ersetzt:

  • "datepicker" ==> "monthpicker"
  • "Datepicker" ==> "Monthpicker"
  • "Datumsauswahl" ==> "Monatsauswahl"
  • "Datumsauswahl" ==> "Monatsauswahl"

Dann habe ich den Teil der for-Schleife entfernt, der das gesamte ui-datepicker-calendar div erzeugt (die eine andere Lösung versteckt sich mit CSS). Dies kann in der Funktion _generateHTML: (inst) gefunden werden.

Suchen Sie die Zeile mit der Aufschrift:

"</div><table class='ui-datepicker-calendar'><thead>" +

Markiere alles von nach dem schließenden Div-Tag bis (und ohne die Zeile, in der steht:

drawMonth++;

Jetzt wird es unglücklich, weil wir einige Dinge schließen müssen. Fügen Sie nach dem schließenden div-Tag von vorher Folgendes hinzu:

";

Der Code sollte nun schön zusammengenäht sein. Hier ist ein Code-Snippet, das zeigt, womit Sie hätten enden sollen:

...other code...

calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
                (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
                (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
                this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
                    row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
                "</div>";
            drawMonth++;
            if (drawMonth > 11) {
                drawMonth = 0;
                drawYear++;
            }

...other code...

Dann habe ich den Code von jquery-ui.css, der sich auf die Datumsauswahl bezieht, in eine neue CSS-Datei kopiert/eingefügt und die folgenden Zeichenfolgen ersetzt:

  • "datepicker" ==> "monthpicker"

Fügen Sie nun die Datums- und Monatswähler zur Seite hinzu!

Diese folgenden JavaScript-Code-Schnipsel funktionieren mit mehreren Datums- und/oder Monatswählern auf der Seite, ohne die oben genannten Probleme! Im Allgemeinen durch Verwendung von "$ (this)" behoben. viel :)

Das erste Skript ist für einen normalen Datepicker und das zweite für die "neuen" Monthpicker.

Das auskommentierte . After , mit dem Sie ein Element zum Löschen des Eingabefelds erstellen können, wurde aus der Antwort von Paul Richards gestohlen.

Ich verwende das Format "MM JJ" in meinem Monatspicker und das Format "JJ-MM-TT" in meinem Datumspicker, aber dies ist vollständig kompatibel mit allen Formaten Sie können frei wählen, was Sie möchten. Ändern Sie einfach die Option 'dateFormat'. Die Standardoptionen 'showButtonPanel', 'showAnim' und 'yearRange' sind selbstverständlich optional und können Ihren Wünschen angepasst werden.


Datumsauswahl hinzufügen

Datepicker-Instanziierung. Diese geht von vor 90 Jahren bis heute. Es hilft Ihnen dabei, das Eingabefeld korrekt zu halten, insbesondere wenn Sie die Optionen defaultDate, minDate und maxDate festlegen. Wenn Sie dies nicht tun, kann es jedoch verwendet werden. Es funktioniert mit jedem Datumsformat, das Sie auswählen.

        $('#MyDateTextBox').datepicker({
            dateFormat: 'yy-mm-dd',
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            showMonthAfterYear: true,
            showWeek: true,
            showAnim: "drop",
            constrainInput: true,
            yearRange: "-90:",
            minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
            defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),

            onClose: function (dateText, inst) {
                // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
                // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
                // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
                // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the default date, because the date seems valid.
                    // We do not need to manually update the input-field, as datepicker has already done this automatically.
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    console.log("onClose: " + err);
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // Instead, we set the current date, as well as the value of the input-field, to the last selected (and
                    // accepted/validated) date from the datepicker, by getting its default date. This only works, because
                    // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
                    // and 'onClose'.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            },

            beforeShow: function (input, inst) {
                // beforeShow is particularly irritating when initializing the input-field with a date-string.
                // The date-string will be parsed, and used to set the currently selected date in the datepicker.
                // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
                // automatically updated, only the internal selected date, until you choose a new date (or, because
                // of our onClose function, whenever you click close or click outside the datepicker).
                // We want the input-field to always show the date that is currently chosen in our datepicker,
                // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
                // the primary ones: invalid date-format; date is too early; date is too late.
                try {
                    // If datepicker can parse the date using our formatstring, the instance will automatically parse
                    // and apply it for us (after the onClose is done).
                    // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
                    // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
                    var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());

                    // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
                    // reset to the last set default date.
                    // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
                    if (typedDate == null)throw "No date selected";

                    // We do a manual check to see if the date is within minDate and maxDate, if they are defined.
                    // If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
                    var minDate = $(this).datepicker("option", "minDate");
                    var maxDate = $(this).datepicker("option", "maxDate");
                    if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
                    if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";

                    // We update the input-field, and the default date, because the date seems valid.
                    // We also manually update the input-field, as datepicker does not automatically do this when opened.
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
                    $(this).datepicker('option', 'defaultDate', typedDate);
                }
                catch (err) {
                    // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
                    // a new valid date, by clicking on a day.
                    // We want the same behavior when opening the datepicker, so we set the current date, as well as the value
                    // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
                    // its default date. This only works, because we manually change the default date of the datepicker whenever
                    // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
                    var date = $(this).datepicker('option', 'defaultDate');
                    $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
                    $(this).datepicker('setDate', date);
                }
            }
        })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

Hinzufügen eines Monatspickers

Fügen Sie die Datei monthpicker.js und die Datei monthpicker.css in die Seite ein, auf der Sie die monthpicker verwenden möchten.

Instanziierung der Monatsauswahl Der von dieser Monatsauswahl abgerufene Wert ist immer der ERSTE Tag des ausgewählten Monats. Beginnt im aktuellen Monat und reicht von vor 100 Jahren bis 10 Jahren in die Zukunft.

    $('#MyMonthTextBox').monthpicker({
        dateFormat: 'MM yy',
        changeMonth: true,
        changeYear: true,
        showMonthAfterYear: true,
        showAnim: "drop",
        constrainInput: true,
        yearRange: "-100Y:+10Y",
        minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
        maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
        defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),

        // Monthpicker functions
        onClose: function (dateText, inst) {
            var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
            $(this).monthpicker('option', 'defaultDate', date);
            $(this).monthpicker('setDate', date);
        },

        beforeShow: function (input, inst) {
            if ($(this).monthpicker("getDate") !== null) {
                // Making sure that the date set is the first of the month.
                if($(this).monthpicker("getDate").getDate() !== 1){
                    var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
                    $(this).monthpicker('option', 'defaultDate', date);
                    $(this).monthpicker('setDate', date);
                }
            } else {
                // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
                $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
            }
        },
        // Special monthpicker function!
        onChangeMonthYear: function (year, month, inst) {
            $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
        }
    })
    //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

Das war's! Das ist alles, was du brauchst, um einen Monatspicker zu machen.

Ich kann anscheinend keine Jsfiddle-Funktion damit ausführen, aber es funktioniert für mich in meinem ASP.NET MVC-Projekt. Tun Sie einfach das, was Sie normalerweise tun, um Ihrer Seite einen Datepicker hinzuzufügen, und integrieren Sie die obigen Skripte, indem Sie möglicherweise die Auswahl (dh $ ("# MyMonthTextBox")) auf etwas ändern, das für Sie funktioniert.

Ich hoffe das hilft jemandem.

Links zu Pastebins für zusätzliche Datums- und Monatseinstellungen:

  1. Monthpicker arbeitet am letzten Tag des Monats . Das Datum, das Sie von diesem Monatspicker erhalten, ist immer der letzte Tag des Monats.

  2. Zwei zusammenarbeitende Monatspicker ; 'start' arbeitet am Ersten des Monats und 'end' am Letzten des Monats. Sie sind beide durcheinander beschränkt. Wenn Sie also einen Monat am Ende auswählen, der vor dem ausgewählten Monat am Anfang liegt, wird "Start" auf den gleichen Monat wie "Ende" geändert. Und umgekehrt. OPTIONAL: Wenn Sie einen Monat bei 'Start' auswählen, wird das 'minDate' bei 'Ende' auf diesen Monat gesetzt. Um diese Funktion zu entfernen, kommentieren Sie eine Zeile in onClose aus (lesen Sie die Kommentare).

  3. Zwei zusammenarbeitende Datepicker ; Beide sind durcheinander begrenzt. Wenn Sie also ein Datum am Ende auswählen, das vor dem ausgewählten Datum am Anfang liegt, ändert sich der Beginn in den gleichen Monat wie das Ende. Und umgekehrt. OPTIONAL: Bei Auswahl eines Datums bei 'Start' wird das 'minDate' bei 'Ende' auf dieses Datum gesetzt. Um diese Funktion zu entfernen, kommentieren Sie eine Zeile in onClose aus (lesen Sie die Kommentare).

Wenn jemand das auch für mehrere Kalender möchte, ist es nicht sehr schwer, diese Funktionalität zu jquery ui hinzuzufügen. mit reduzierter Suche nach:

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

füge dies vor x hinzu

var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}

suchen nach

<table class="ui-datepicker-calendar

und ersetzen Sie es durch

<table class="ui-datepicker-calendar'+accl+'

auch suchen nach

this._defaults={

ersetzen Sie es durch

this._defaults={justMonth:false,

für CSS solltest du folgendes benutzen:

.ui-datepicker table.ui-datepicker-just_month{
    display: none;
}

nachdem alles erledigt ist, gehen Sie zu Ihren gewünschten Datepicker-Init-Funktionen und geben Sie die Einstellung var ein

$('#txt_month_chart_view').datepicker({
    changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        justMonth: true,
        create: function(input, inst) {
            $(".ui-datepicker table").addClass("badbad");
        },
        onClose: function(dateText, inst) {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
});

justMonth: true ist hier der Schlüssel :)

3
prdatur

Waht about: http://www.mattkruse.com/javascript/calendarpopup/

Wählen Sie das Beispiel für die Monatsauswahl

2
Roger

Ich hatte gewisse Schwierigkeiten mit der akzeptierten Antwort und keine andere konnte mit minimalem Aufwand als Basis verwendet werden. Daher habe ich beschlossen, die neueste Version der akzeptierten Antwort zu optimieren, bis sie mindestens den JS-Mindeststandards für Codierung/Wiederverwendbarkeit entspricht.

Hier ist ein Weg viel sauberer Lösung als die . (neueste) Ausgabe der Ben Koehler akzeptierte Antwort. Darüber hinaus wird es:

  • arbeiten Sie nicht nur mit dem mm/yy -Format, sondern auch mit jedem anderen, einschließlich dem MM yy des OP.
  • den Kalender anderer Datumsangaben auf der Seite nicht ausblenden.
  • das globale JS-Objekt wird nicht implizit mit den Variablen datestr, month, year usw. verschmutzt.

Hör zu:

$('.date-picker').datepicker({
    dateFormat: 'MM yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function (dateText, inst) {
        var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
        if (!isDonePressed)
            return;

        var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
            year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();

        $(this).datepicker('setDate', new Date(year, month, 1)).change();
        $('.date-picker').focusout();
    },
    beforeShow: function (input, inst) {
        var $this = $(this),
            // For the simplicity we suppose the dateFormat will be always without the day part, so we
            // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
            dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
            date;

        try {
            date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
        } catch (ex) {
            return;
        }

        $this.datepicker('option', 'defaultDate', date);
        $this.datepicker('setDate', date);

        inst.dpDiv.addClass('datepicker-month-year');
    }
});

Und alles, was Sie sonst noch brauchen, ist das folgende CSS:

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

Das ist es. Hoffe, dass die oben genannten einige Zeit für weitere Leser sparen.

2

Ich mochte die @ user1857829-Antwort und seinen "Extend-JQuery-Like-A-Plugin-Ansatz". Ich habe nur eine kleine Änderung vorgenommen, damit der Kommissionierer das Datum tatsächlich in das Feld schreibt, wenn Sie den Monat oder das Jahr auf irgendeine Weise ändern. Ich stellte fest, dass mir dieses Verhalten gefallen würde, nachdem ich es ein bisschen benutzt hatte.

jQuery.fn.monthYearPicker = function(options) {
  options = $.extend({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showAnim: "",
    onChangeMonthYear: writeSelectedDate
  }, options);
  function writeSelectedDate(year, month, inst ){
   var thisFormat = jQuery(this).datepicker("option", "dateFormat");
   var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
   inst.input.val(d);
  }
  function hideDaysFromCalendar() {
    var thisCalendar = $(this);
    jQuery('.ui-datepicker-calendar').detach();
    // Also fix the click event on the Done button.
    jQuery('.ui-datepicker-close').unbind("click").click(function() {
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      thisCalendar.datepicker('setDate', new Date(year, month, 1));
      thisCalendar.datepicker("hide");
    });
  }
  jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}
2
stravanato

Einige Verbesserungen an der nahezu perfekten Antwort von BrianS vorgenommen:

  1. Ich habe den angezeigten Wert umgeschrieben, weil ich denke, dass er in diesem Fall tatsächlich etwas besser lesbar ist (obwohl ich ein etwas anderes Format verwende).

  2. Mein Kunde wollte keinen Kalender, deshalb habe ich einen Klassenzusatz zum Ein-/Ausblenden hinzugefügt, um dies zu tun, ohne andere Datumsauswahl zu beeinflussen. Das Entfernen der Klasse erfolgt über einen Timer, um zu verhindern, dass die Tabelle beim Ausblenden des Datepickers erneut aufleuchtet, was im IE sehr auffällig zu sein scheint.

BEARBEITEN: Ein Problem, das noch zu lösen ist, besteht darin, dass der Datumsauswahlpunkt nicht geleert werden kann. Deaktivieren Sie das Feld und klicken Sie auf "Weg", um ihn mit dem ausgewählten Datum zu füllen.

EDIT2: Ich habe es nicht geschafft, dieses Problem zu lösen (dh ohne einen separaten Clear-Button neben dem Eingang hinzuzufügen), also endete ich mit folgendem: https://github.com/thebrowser/jquery.ui.monthpicker) - Wenn jemand die Standard-Benutzeroberfläche dazu bringen kann, wäre das erstaunlich.

    $('.typeof__monthpicker').datepicker({
        dateFormat: 'mm/yy',
        showButtonPanel:true,
        beforeShow: 
            function(input, dpicker)
            {                           
                if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
                {
                    var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);

                    $(this).datepicker('option', 'defaultDate', d);
                    $(this).datepicker('setDate', d);
                }

                $('#ui-datepicker-div').addClass('month_only');
            },
        onClose: 
            function(dt, dpicker)
            {
                setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);

                var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

                $(this).datepicker('setDate', new Date(y, m, 1));
            }
    });

Sie benötigen auch diese Stilregel:

#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}
2
Whelkaholism

Ich habe die verschiedenen hier angebotenen Lösungen ausprobiert und sie haben gut funktioniert, wenn Sie nur ein paar Dropdowns haben möchten.

Der beste (in Aussehen usw.) 'Picker' ( https://github.com/thebrowser/jquery.ui.monthpicker ), der hier vorgeschlagen wird, ist im Grunde eine Kopie einer alten Version von jquery-ui datepicker mit Das _generateHTML wurde umgeschrieben. Ich fand jedoch, dass es nicht mehr gut mit dem aktuellen jquery-ui (1.10.2) funktioniert und andere Probleme hatte (schließt nicht auf esc, schließt nicht beim Öffnen eines anderen Widgets, hat fest codierte Stile).

Anstatt zu versuchen, diesen Monats-Picker zu reparieren und denselben Prozess mit dem neuesten Datums-Picker erneut zu versuchen, habe ich mich in die relevanten Teile des vorhandenen Datums-Pickers eingeklinkt.

Dies beinhaltet das Überschreiben von:

  • _generateHTML (um das Monatsauswahl-Markup zu erstellen)
  • parseDate (da es nicht gefällt, wenn keine Tageskomponente vorhanden ist),
  • _selectDay (als Datumsauswahl wird .html () verwendet, um den Tageswert zu erhalten)

Da diese Frage etwas alt und bereits gut beantwortet ist, wird hier nur mit der _selectDay-Überschreibung gezeigt, wie dies geschehen ist:

jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
    if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
    // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
    return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};

Wie gesagt, dies ist eine alte Frage, aber ich fand sie nützlich, und wollte Feedback mit einer alternativen Lösung hinzufügen.

1
freedomn-m

Ich weiß, dass es sich um eine etwas verspätete Antwort handelt, aber ich habe vor ein paar Tagen das gleiche Problem bekommen und bin auf eine nette und reibungslose Lösung gestoßen. Zuerst fand ich diesen tollen Date Picker hier

Dann habe ich gerade die CSS-Klasse (jquery.calendarPicker.css) aktualisiert, die mit dem folgenden Beispiel geliefert wird:

.calMonth {
  /*border-bottom: 1px dashed #666;
  padding-bottom: 5px;
  margin-bottom: 5px;*/
}

.calDay 
{
    display:none;
}

Das Plugin löst ein DateChanged-Ereignis aus, wenn Sie etwas ändern. Es spielt also keine Rolle, dass Sie nicht auf einen Tag klicken (und es passt zu Nice als Jahr- und Monatsauswahl).

Ich hoffe es hilft!

1
pjnovas

Ich brauchte auch einen Monatspflücker. Ich habe eine einfache Version mit Jahresüberschrift und 3 Zeilen mit 4 Monaten darunter erstellt. Probieren Sie es aus: Einfache Monatsauswahl mit jQuery .

1
Tiago Coelho

für einen Monatspicker mit JQuery v 1.7.2 habe ich das folgende Javascript, das genau das tut

$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});

0

Vielen Dank für die Lösung von Ben Koehler.

Ich hatte jedoch ein Problem mit mehreren Instanzen von Datepickern, von denen einige bei der Tagesselektion benötigt wurden. Ben Koehlers Lösung (in Edit 3) funktioniert, verbirgt jedoch die Tagesauswahl in allen Fällen. Hier ist ein Update, das dieses Problem behebt:

$('.date-picker').datepicker({
    dateFormat: "mm/yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
            $(this).datepicker(
                'setDate',
                new Date(
                    $("#ui-datepicker-div .ui-datepicker-year :selected").val(),
                    $("#ui-datepicker-div .ui-datepicker-month :selected").val(),
                    1
                )
            ).trigger('change');
            $('.date-picker').focusout();
        }
        $("#ui-datepicker-div").removeClass("month_year_datepicker");
    },
    beforeShow : function(input, inst) {
        if((datestr = $(this).val()).length > 0) {
            year = datestr.substring(datestr.length-4, datestr.length);
            month = datestr.substring(0, 2);
            $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
            $(this).datepicker('setDate', new Date(year, month-1, 1));
            $("#ui-datepicker-div").addClass("month_year_datepicker");
        }
    }
});
0
dj3c1t