jQuery UI DatePicker zeigt nur das Monat und das Jahr an

374

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.

javascript jquery date jquery-ui jquery-ui-datepicker Aanu
quelle

16

Sie möchten also einen Monat auswählen?

Dotty

Verwenden Sie den jQueryUI DatePicker?

wpjmurray

Ja. jQueryUI DatePicker

Aanu

6

Dies ist keine Antwort auf Ihre Frage, aber wir haben dies jetzt, sieht viel besser aus: eternicode.github.io/bootstrap-datepicker/…

Ruben

Der Bootstrap-Datepicker scheint ein eingestelltes Repo zu sein, bei dem sich die Probleme häufen, ohne dass merkliche

Anstrengungen unternommen

424

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 Wert für das Monatsjahr nur beim Klicken auf die Schaltfläche Fertig zum Eingabefeld hinzu. 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 der Lösung von rexwolf down.
http://jsfiddle.net/DBpJe/5106

Ben Koehler
quelle

14

Durch Aufrufen von 'setDate' wird die Auswahl in einigen Browsern erneut geöffnet. Um dies zu verhindern, deaktivieren und aktivieren Sie die Auswahl: $ (this) .datepicker ('disable'); $ (this) .datepicker ('setDate', neues Datum (Jahr1, Monat1, 1)); $ (this) .datepicker ('enable');

Sven Sönnichsen

1

@Sven hier ist eine Alternative:$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));

ThiamTeck

1

Ich versuche, diese Lösung zu verwenden, aber die Verwendung von getDate für einen Datepicker wird erst heute zurückgegeben. Wie geht's?

Supertopi

1

Ich sehe, dass die meisten Beispiele Inline-Stile auf der Seite selbst verwenden. Dies wäre ein Problem, wenn Sie mehr als einen Kalender (z. B. mit jeweils unterschiedlichen Einstellungen) auf derselben Seite benötigen. Ich bevorzuge das Hinzufügen von Stilen in der CSS-Datei als solche:

#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}  #ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}

Und dann verwenden Sie Javascript, um das Verhalten zu manipulieren:$("#ui-datepicker-div").addClass('noCalendar');

Poweratom

1

Im obigen Beispiel Wenn ich das Textfeld löschen möchte, kann ich nicht. Kann mir jemand helfen.

Bik

83

Dieser Code funktioniert für mich 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:

Leniel Maccaferri
quelle

Wie kann man einen Wert für diesen Kalender einstellen?

Rafik Malek

62

@ Ben Koehler , das ist Präfekt! Ich habe eine geringfügige Änderung vorgenommen, damit 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 wird 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>

BrianS
quelle

Diese Antwort ist meistens richtig. Ich musste jedoch MM in M ändern, um den richtigen Monat auszuwählen, wenn bereits ein Datum ausgewählt wurde.

Chazaq

18

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

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 rufe so auf:

$('input.monthYearPicker').monthYearPicker();

user1857829
quelle

2

Am Ende stimme ich dies ab, weil es nicht funktioniert, da die Ereignisse onSelect und / oder onChangeMonthYear und / oder onClose entweder nicht ausgelöst werden oder nicht die richtigen Werte erhalten oder das Widget bei Überschreibung nicht mehr funktioniert

Knocte

10

<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 Zeitformat JJJJ-MM

Nur in FF4 ausprobiert

Erik Polder
quelle

"yy" in JQuery ist ein vierstelliges Jahr. Wenn Sie dies möchten, haben Sie dies gerade erreicht.

Paweł Dyda

9

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

Anthony Shaw
quelle

5

Nicht gewartet, aber es gibt eine Gabelung: github.com/zorab47/jquery.ui.monthpicker

denis.peplin

8

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 Monthpickern 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('');
    })
);

Paul Richards
quelle

5

Ich brauchte einen Monat / Jahr-Picker für zwei Felder (Von & Bis) und als eines ausgewählt wurde, wurde das Maximum / Min auf das andere eingestellt ... a la Picking Airline Ticketdaten. 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 ganz bestimmten Reihenfolge festlegen.

Die vollständige Lösung finden Sie in dieser Geige: 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 einem Stilblock hinzu, wie oben erwähnt:

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

Amy Struck
quelle

5

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

    $('#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 funktioniert nachweislich, ist aber mit vielen Fehlern konfrontiert, sodass ich gezwungen war, an mehreren Stellen des Datepickers 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 am unteren Rand des Browsers befindet);

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

Ich weiß, dass mein Fix alles andere als gut war, aber im Moment funktioniert es. Ich hoffe es hilft.

Rexwolf
quelle

Fügen Sie diese Zeile zunächst zu beforeShow hinzu: {inst.dpDiv.addClass ('month_year_datepicker')}. Die blinkenden Daten hören auf :). Ich denke auch, dass .focus dann nicht benötigt wird

Parag

5

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 Monat-Jahr-Wert nur beim Klicken auf die Schaltfläche Fertig zum Eingabefeld hinzu
Kein " erneutes Öffnen", wenn Sie auf "Fertig" klicken
-------------------------------- eine
andere Lösung, die funktioniert Gut für Datepicker und Monthpicker auf derselben Seite: (Vermeiden Sie auch den Fehler des mehrfachen Klickens auf die vorherige Schaltfläche im IE, der auftreten kann, wenn wir die Fokusfunktion verwenden.)
JS-Geigenlink

Chris Phan
quelle

4

Ist es nur ich oder funktioniert das nicht so, wie es in IE (8) sein sollte? Das Datum ändert sich, wenn Sie auf "Fertig" klicken, aber die Datumsauswahl wird wieder geöffnet, bis Sie tatsächlich irgendwo auf der Seite klicken, um den Fokus auf das Eingabefeld zu verlieren ...

Ich suche nach einer Lösung.

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

Tom Van Schoor
quelle

1

$ (this) .datepicker ('deaktivieren'); $ (this) .datepicker ('setDate', neues Datum (Jahr, Monat, 1)); $ (this) .datepicker ('enable'); Löst das Problem.

Tom Van Schoor

1

Dies ist keine Antwort

Sisharp

4

Wenn Sie nach einem Monats-Picker suchen, probieren Sie diesen 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);

user2630080
quelle

Link ist tot. Diese Seite kann nicht erreicht werden | Die DNS-Adresse des Servers von lucianocosta.info wurde nicht gefunden.

Pang

1

Hier ist ein aktualisierter Link: lucianocosta.com.br/jquery.mtz.monthpicker

Sebastian S.

Der aktualisierte Link ist ebenfalls defekt.

Nasch

4

Wie viele andere bin ich bei dem Versuch, dies zu tun, auf zahlreiche Probleme gestoßen, und nur eine Kombination der veröffentlichten Lösungen und schließlich ein großer Hack, um es perfekt zu machen, hat mir eine Lösung gebracht.

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

Wenn Sie ein neues Datum in einer Datumsauswahl auswählen, wird auch das (interne) Datum anderer Datumsauswahl geändert. Wenn Sie also die anderen erneut öffnen (oder versuchen, ihr Datum abzurufen), haben sie ein anderes Datum als das in ihrer zugewiesenen Eingabe angezeigte -Feld.
Der Datepicker würde sich beim erneuten Öffnen nicht an das Datum "erinnern".
Der Code zum Jonglieren der Daten verwendete Teilzeichenfolgen, sodass er nicht mit allen Formaten kompatibel war.
"My monthpicker" hat das Eingabefeld nur beim Schließen geändert und nicht, wenn die Werte geändert wurden.
Das Eingabefeld wird nicht korrekt aktualisiert, wenn Sie eine falsch formatierte Eingabezeichenfolge für ein Datum eingeben und dann auf der Datumsauswahl auf "Schließen" klicken.
Ich kann keine normalen Datepicker, die die Tage anzeigen, auf derselben Seite haben wie Monthpicker, die die Tage nicht anzeigen.

Ich habe endlich einen Weg gefunden, all diese Probleme zu beheben . Die ersten vier können einfach behoben werden, indem Sie sorgfältig darauf achten, wie Sie Ihre Datums- und Monatsauswahl in ihrem internen Code referenzieren, und natürlich einige manuelle Aktualisierungen Ihrer Auswahl vornehmen. Dies können Sie in den Instanziierungsbeispielen unten sehen. Das fünfte Problem kann behoben werden, indem den Datepicker-Funktionen benutzerdefinierter Code hinzugefügt wird.

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

Um nun Monthpicker zu verwenden und das letzte Problem zu beheben, müssen wir die Datepicker und die Monthpicker trennen. Wir könnten eines der wenigen jQuery-UI-Monthpicker-Addons da draußen bekommen, aber einige haben keine Flexibilität / Fähigkeit zur Lokalisierung, andere keine Animationsunterstützung ... also, was tun? Rollen Sie Ihre "eigenen" aus dem Datepicker-Code! Auf diese Weise erhalten Sie einen voll funktionsfähigen Monthpicker mit allen Funktionen des Datepickers, ohne dass Tage angezeigt werden müssen.

Ich habe ein Monthpicker-JS-Skript und das zugehörige CSS-Skript unter Verwendung der unten beschriebenen Methode mit dem Code jQuery-UI v1.11.1 geliefert. Kopieren Sie diese Code-Schnipsel einfach in zwei neue Dateien, monthpicker.js und monthpicker.css.

Wenn Sie mehr über den recht einfachen Vorgang erfahren möchten, mit dem ich den Datepicker in einen Monthpicker konvertiert habe, scrollen Sie zum letzten Abschnitt.

Fügen Sie nun die Datepicker und Monthpicker zur Seite hinzu!

Diese folgenden Javascript-Codefragmente funktionieren mit mehreren Datepickern und / oder Monthpickern 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, wird aus Paul Richards 'Antwort gestohlen.

Ich verwende das "MM yy" -Format in meinem Monthpicker und das 'yy-mm-dd'-Format in meinem Datepicker, aber dies ist vollständig kompatibel mit allen Formaten , sodass Sie jedes gewünschte Format verwenden können. Ändern Sie einfach die Option 'dateFormat'. Die Standardoptionen 'showButtonPanel', 'showAnim' und 'yearRange' sind natürlich optional und können an Ihre Wünsche angepasst werden.

Hinzufügen eines Datepickers

Datepicker-Instanziierung. Dieser geht von vor 90 Jahren bis heute. Es hilft Ihnen, das Eingabefeld korrekt zu halten, insbesondere wenn Sie die Optionen defaultDate, minDate und maxDate festlegen. Wenn Sie dies nicht tun, kann es damit umgehen. Es funktioniert mit jedem von Ihnen ausgewählten dateFormat.

        $('#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 Monthpickers

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

Monthpicker-Instanziierung Der von diesem Monthpicker abgerufene Wert ist immer der ERSTE Tag des ausgewählten Monats. Beginnt im aktuellen Monat und reicht von vor 100 Jahren bis zu 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 ist es! Das ist alles, was Sie brauchen, um einen Monatspicker zu machen.

Ich kann anscheinend keine jsfiddle damit arbeiten lassen, 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 oben genannten Skripte, möglicherweise indem Sie den Selektor (dh $ ("# MyMonthTextBox")) auf etwas ändern, das für Sie funktioniert.

Ich hoffe das hilft jemandem.

Links zu Pastebins für einige zusätzliche Datums- und Monatsauswahl-Setups:

Monthpicker arbeitet am letzten Tag des Monats . Das Datum, das Sie von diesem Monatspicker erhalten, ist immer der letzte Tag des Monats.
Zwei zusammenarbeitende Monthpicker ; 'start' arbeitet am ersten des Monats und 'end' arbeitet am letzten des Monats. Sie sind beide voneinander eingeschränkt. Wenn Sie also einen Monat am Ende auswählen, der vor dem ausgewählten Monat am Anfang liegt, ändert sich der Start in den gleichen Monat wie das Ende. 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).
Zwei zusammenarbeitende Datepicker ; Sie sind beide voneinander eingeschränkt. Wenn Sie also ein Datum am Ende auswählen, das vor dem ausgewählten Datum am Start liegt, wird "Start" in den gleichen Monat wie "Ende" geändert. Und umgekehrt. OPTIONAL: Wenn Sie ein Datum bei 'Start' auswählen, 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).

Wie ich den DatePicker in einen MonthPicker verwandelt habe

Ich habe den gesamten Javascript-Code aus jquery-ui-1.11.1.js, der sich auf ihren Datepicker bezieht, 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-Kalender-Div erstellt (das Div, das andere Lösungen mithilfe von CSS verbergen). Dies kann in der _generateHTML: Funktion (inst) gefunden werden.

Suchen Sie die Zeile mit der Aufschrift:

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

Markieren Sie alles von nach dem schließenden div-Tag bis zur Zeile (und ohne diese ), in der steht:

drawMonth++;

Jetzt wird es unglücklich sein, weil wir einige Dinge schließen müssen. Fügen Sie nach dem Schließen des Div-Tags von zuvor Folgendes hinzu:

";

Der Code sollte jetzt gut zusammengefügt werden. Hier ist ein Code-Snippet, das zeigt, was Sie am Ende hätten haben 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 aus jquery-ui.css, der sich auf die Datepicker bezieht, in eine neue CSS-Datei kopiert / eingefügt und die folgenden Zeichenfolgen ersetzt:

"datepicker" ==> "monthpicker"

Ultroman der Tacoman
quelle

3

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

Erstens würde ich sagen , nicht auf Ihre Frage. Sie können 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, es macht immer noch keinen Sinn, weil Sie die Daten klicken müssen, um ein Datum auszuwählen.

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

Reigel
quelle

3

Ich hatte das Problem der Datumsauswahl mit der Monatsauswahl gemischt. 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();

        }
    });

PYT
quelle

3

Wenn jemand das auch für mehrere Kalender möchte, ist es nicht sehr schwierig, diese Funktionalität zu jquery ui hinzuzufügen. mit minimierter 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 sollten Sie verwenden:

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

Danach gehen Sie einfach zu den gewünschten Datumsauswahl-Init-Funktionen und geben 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 der Schlüssel hier :)

prdatur
quelle

2

Waht über: http://www.mattkruse.com/javascript/calendarpopup/

Wählen Sie das Beispiel für die Monatsauswahl

Roger
quelle

Da ich bereits jquery datepicker verwende, bevorzuge ich die Verwendung oder die manuelle Erstellung von Monat und Jahr.

Aanu

2

Die oben fast perfekte Antwort von BrianS wurde ein paar Mal verfeinert:

Ich habe den angezeigten Wert neu eingestellt, weil ich denke, dass er in diesem Fall tatsächlich etwas besser lesbar ist (obwohl ich ein etwas anderes Format verwende).
Mein Kunde wollte keinen Kalender, deshalb habe ich eine On / Show / Hide-Klasse hinzugefügt, um dies zu tun, ohne andere Datepicker zu beeinflussen. Das Entfernen der Klasse erfolgt über einen Timer, um zu vermeiden, dass die Tabelle beim Ausblenden der Datumsauswahl wieder aufblitzt, was im IE sehr auffällig zu sein scheint.

BEARBEITEN: Ein Problem, das damit noch zu lösen ist, ist, dass es keine Möglichkeit gibt, den Datums-Picker zu leeren - löschen Sie das Feld und klicken Sie weg, und es wird mit dem ausgewählten Datum neu gefüllt.

EDIT2: Ich habe es nicht geschafft, dies gut zu lösen (dh ohne eine separate Schaltfläche zum Löschen neben der Eingabe hinzuzufügen), also habe ich nur Folgendes verwendet: https://github.com/thebrowser/jquery.ui.monthpicker - wenn jemand kann Holen Sie sich die Standard-Benutzeroberfläche, um es zu tun, das wäre 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
}

Whelkaholism
quelle

2

Ich mochte die Antwort @ user1857829 und seinen "Extend-JQuery-Like-A-Plugin-Ansatz". Ich habe gerade eine kleine Änderung vorgenommen, damit der Kommissionierer das Datum in das Feld schreibt, wenn Sie Monat oder Jahr in irgendeiner Weise ändern. Ich fand, dass mir dieses Verhalten gefallen würde, nachdem ich es ein wenig 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);
}

stravanato
quelle

2

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 Mindeststandards für JS-Codierung / Wiederverwendbarkeit entspricht.

Hier ist eine viel sauberere Lösung als die 3. (neueste) Ausgabe der von Ben Koehler akzeptierten Antwort. Darüber hinaus wird es:

Arbeiten Sie nicht nur mit dem mm/yyFormat, sondern auch mit allen anderen, einschließlich der OPs MM yy.
den Kalender anderer Datepicker auf der Seite nicht ausblenden.
nicht implizit das globale JS - Objekt mit dem verschmutzt datestr, month, yearetc Variablen.

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 andere, was Sie brauchen, ist das folgende CSS:

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

Das ist es. Hoffe, dass das oben Genannte Zeit für weitere Leser spart.

Alexander Abakumov
quelle

1

Gerecht und zu Ihrer Information. Die Zeile 'inst.dpDiv.addClass (' datepicker-month-year ');' fügt das gesamte Monat-Jahr zum Kalender-Div von datepicker hinzu. Wenn also andere Datumsfelder mit datepicker vorhanden sind, funktionieren sie aus diesem Grund nicht mehr. Da es nur einen einzigen Div für den Kalender gibt, wäre es interessant, ein '$ ('. Datepicker-month-year '). RemoveClass (' datepicker-month-year ') hinzuzufügen.' Verwenden der beforeShow für alle anderen Datepicker, für die der herkömmliche Kalender erforderlich ist. ODER entfernen Sie die Klasse, wenn Sie den Fokus verlieren. Aber ich konnte nichts in der API finden

Johnny Bigoode

1

Dies ist die vollständige Antwort, die jeder verwenden sollte. Das größte Problem, das für mich gelöst wurde, war, dass das Popup für die Dateneingabe standardmäßig den aktuellen Monat und das aktuelle Jahr verwendet, unabhängig davon, was bereits darin enthalten ist. Diese Antwort hat es behoben.

Alex F

1

Ich weiß, dass es eine etwas späte Antwort ist, aber ich habe vor ein paar Tagen das gleiche Problem bekommen und eine schöne und reibungslose Lösung gefunden. Zuerst habe ich hier diese großartige Datumsauswahl gefunden

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 gut als Jahr- und Monatsauswahl).

Ich hoffe es hilft!

pjnovas
quelle

1

Ich brauchte auch einen Monatspflücker. Ich habe eine einfache mit Jahr auf Kopf und 3 Zeilen von 4 Monaten unten gemacht. Probieren Sie es aus: Einfache Monatsauswahl mit jQuery .

Tiago Coelho
quelle

1

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

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 dem neu geschriebenen _generateHTML. Ich fand jedoch, dass es mit der aktuellen jquery-ui (1.10.2) nicht mehr gut funktioniert und hatte andere Probleme (schließt nicht auf esc, schließt nicht auf anderen Widget-Öffnungen, hat fest codierte Stile).

Anstatt zu versuchen, diesen Monthpicker zu reparieren und den gleichen Vorgang mit dem neuesten Datepicker erneut zu versuchen, habe ich mich an die relevanten Teile der vorhandenen Datumsauswahl gewöhnt.

Dies beinhaltet das Überschreiben von:

_generateHTML (um das Month Picker Markup zu erstellen)
parseDate (da es nicht gefällt, wenn es keine Tageskomponente gibt),
_selectDay (da datepicker .html () verwendet, um den Tageswert abzurufen)

Da diese Frage etwas alt und bereits gut beantwortet ist, ist hier nur die _selectDay-Überschreibung, um zu zeigen, wie dies getan wurde:

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 bereits erwähnt, ist dies eine alte Frage, aber ich fand sie nützlich und wollte Feedback mit einer alternativen Lösung hinzufügen.

Freiheit-m
quelle

0

Für einen Monthpicker 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'] });

Ricardo Appleton
quelle

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 Tagesauswahl benötigt wurden. Die Lösung von Ben Koehler (in Edit 3) funktioniert, verbirgt jedoch in allen Fällen die Tagesauswahl. Hier ist ein Update, das dieses Problem löst:

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

dj3c1t
quelle

-2

Verwenden Sie onSelectRückruf und entfernen Sie den Jahresanteil manuell und legen Sie den Text im Feld manuell fest

Teja Kantamneni
quelle

3

Ich denke, Sie lesen die Frage nicht. Aanu möchte "den Monat und das Jahr (Mai 2010) und nicht den Kalender anzeigen".

Reigel