Bootstrap Datepicker - Nur Monate und Jahre


122

Ich benutze Bootstrap Datepicker und mein Code ist wie folgt: Demo des Codes auf jsfiddle

<div class="input-append date" id="datepicker" data-date="02-2012" 
     data-date-format="mm-yyyy">

 <input  type="text" readonly="readonly" name="date" >    
 <span class="add-on"><i class="icon-th"></i></span>      
</div>      


$("#datepicker").datepicker({
        viewMode: 'years',
         format: 'mm-yyyy'
    });

Der obige Code funktioniert einwandfrei, aber ich versuche, Benutzern nur die Auswahl von Monaten und Jahren zu ermöglichen.

Könnten Sie mir bitte sagen, wie das geht?


Ich würde nur zwei Auswahlfelder verwenden ... es wäre viel sinnvoller, als ein Kalender-Widget zu verwenden und zu versuchen, den tatsächlichen Kalender auszublenden.

6
Würden Sie immer noch zwei Auswahlfelder verwenden, selbst wenn Sie eine Option wie diese jsfiddle.net/Kz2sW/1 hätten ? :)
black_belt

Antworten:


271

Wie wäre es damit :

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});

Referenz: Datepicker für Bootstrap


Für Version 1.2.0 und höher viewModewurde geändert startView, verwenden Sie also:

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

Siehe auch die Dokumentation .


1
Danke , aber ich hatte zu ersetzen format: " mm"mit format: "mm-yyyy". Es funktioniert jetzt :)
black_belt

1
Es zeigt nicht die -zwischen den Monaten und Jahren , wenn Sie einen Raum halten , bevor mm-yyyyin format: " mm-yyyy",, können Sie bearbeiten Ihre Antwort noch einmal bitte?
black_belt

Perfekt. Vielen Dank.
Tigin

Ich denke nicht, dass viewMode eine gültige Option gemäß der Dokumentation ist. Mit den anderen Optionen konnte die erforderliche Anzeige jedoch funktionieren.
Prathamesh Datar

Gibt es eine Option für die automatische Schließung?
Alauddin Ahmed


4

Ich verwende Version 2 (unterstützt sowohl Bootstrap v2 als auch v3) und für mich funktioniert dies:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});

Wechsel minViewzuminViewMode
Raghavendra N

3

Für die neueste bootstrap-datepickerVersion (1.4.0 zum Zeitpunkt des Schreibens) müssen Sie Folgendes verwenden:

$('#myDatepicker').datepicker({
    format: "mm/yyyy",
    startView: "year", 
    minViewMode: "months"
})

Quelle: Bootstrap Datepicker-Optionen


Beim Klicken des Monats im Bootstrap wird das Datum angezeigt und anschließend Text im MM / JJ-Format eingegeben
Shiva Saurabh,

1

Ich verwende den Bootstrap-Kalender für zukünftige Daten, die nicht zulässig sind, wobei nur Änderungen in Monaten und Jahren zulässig sind.

var j = jQuery.noConflict();
        j(function () {
            j(".datepicker").datepicker({ dateFormat: "dd-M-yy" }).val()
        });

        j(function () {
            j(".Futuredatenotallowed").datepicker({
                changeMonth: true,
                maxDate: 0,
                changeYear: true,
                dateFormat: 'dd-M-yy',
                language: "tr"
            }).on('changeDate', function (ev) {
                $(this).blur();
                $(this).datepicker('hide');
            }).val()
        });

1

Sie sollten nur minViewMode: "months"in Ihrer Datepicker-Funktion hinzufügen müssen.


0

Para visualiar los meses del año aktuell, visualiza solo los meses, y con el formato solo toma los meses de ese año. tambien se puede confirurar para que se visualice una cierta cantidad de meses

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>

5
Vielen Dank für dieses Code-Snippet, das möglicherweise nur begrenzte und sofortige Hilfe bietet. Eine richtige Erklärung würde ihren langfristigen Wert erheblich verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der von Ihnen getroffenen Annahmen.
Ismael Padilla

Se agrego una pequeña Beschreibung de lo que hace el codigo
Marco Puenayan

-1

Rufen Sie das auf, $('.input-group.date').datepicker("remove");wenn die select-Anweisung geändert wird, und stellen Sie dann Ihre Datepicker-Ansicht ein. Rufen Sie dann das auf$('.input-group.date').datepicker("update");

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.