Materialize CSS drehen datepicker in monthpicker

Question

Ich muss einen Monat und ein Jahr als Filter auswählen. Ich benutze materialize CSS über meine gesamte Webapplikation. Jetzt bin ich auf ein Problem gestoßen, ich möchte einen Monat auswählen, also html eingabetyp = monat. Aber Materialise CSS bietet nur Datum an. Wie kann ich meinen Datepicker in einen Monatszähler umwandeln?

Und meine HTML ist einfach, aber gibt mir nicht den Monat, es gibt mir auch den Tag.

Answer 1

diesen Code Versuchen

hier gesetzt i Datum Monat Auswahl

$('.datepicker').pickadate({ 
 
     selectMonths: true, 
 
     format: 'mmmm', 
 
     selectYears: false, 
 
     buttonImageOnly: false, 
 
     disable: [true], 
 
     onOpen: function() { 
 
     $(".picker__nav--prev, .picker__nav--next").remove(); 
 
     }, 
 
     onSet: function(arg){ 
 
    var selectedMonth = parseInt(arg.highlight[1]); 
 
    var selectedYear = arg.highlight[0]; 
 
    var selectedDate = arg.highlight[2]; 
 
    this.close(); 
 
    this.set('select', [selectedYear, selectedMonth, selectedDate,{ format: 'yyyy/mm/dd' }]); 
 
    } 
 
    }); 
 

 

.picker__frame { 
 
    margin: 0 auto; 
 
    max-width: 565px; 
 
} 
 

 
.picker__date-display { 
 
    text-align: center; 
 
    background-color: #26a69a; 
 
    color: #fff; 
 
    padding-bottom: 15px; 
 
    font-weight: 300; 
 
    float: left; 
 
    width: 50%; 
 
    height: 330PX; 
 
} 
 

 
.picker__calendar-container { 
 
    padding: 0 1rem; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.picker__footer { 
 
    text-align: right; 
 
    padding: 5px 10px; 
 
    clear: both; 
 
    width: 50%; 
 
    float: right; 
 
} 
 

 
.picker__month-display { 
 
    text-transform: uppercase; 
 
    font-size: 2rem; 
 
    margin-top: 55px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css"> 
 
<input type="month" class="datepicker">

Answer 2

Versuchen Sie, diesen Code zu verwenden, damit er in diesem Code Tag, Monat und Jahr auswählen kann.

$ ("# datepicker"). Datepicker ({changeMonth: true, maxDate: '0', changeYear: true, yearRange: '1960: 2017', dateFormat: 'tt-mm-yy,});