Ändern der Nummer im Monat

Question

Ich möchte die Zahlen auf den Wörtern im Vordergrund ändern.

Ex: 0 = Januar/1 = Februar/2 = März ....

Dies ist mein Code HTML

<div class="input-group btn-group select-date"> 
<button class="btn btn-default" type="button"><i class="fa fa-caret-left"></i></button> 
<input type="text" class="form-control" value="05" min="01" max="12" readonly> 
<button class="btn btn-default" type="button"><i class="fa fa-caret-right"></i></button> 
</div> 

Das ist mein Code JS ist

$(function(){ 
    $('.select-date .btn:last-of-type').on('click', function() { 
     var btn = $(this); 
     var input = btn.closest('.select-date').find('input'); 
     if (input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max'))) {  
     input.val(parseInt(input.val(), 10) + 1); 
     } else { 
     btn.next("disabled", true); 
     } 
    }); 
    $('.select-date .btn:first-of-type').on('click', function() { 
     var btn = $(this); 
     var input = btn.closest('.select-date').find('input'); 
     if (input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min'))) {  
     input.val(parseInt(input.val(), 10) - 1); 
     } else { 
     btn.prev("disabled", true); 
     } 
    }); 
}) 

Bitte kannst du mir helfen, das problem zu lösen, ich bin wirklich verloren.

Answer 1

Ich habe versucht, so nah wie möglich zu halten, um Ihren ursprünglichen Code. Ich nahm auch an, dass du die Monatsnamen auf Französisch brauchst.

Die Idee besteht darin, die Monatsnummer als Attribut Ihrer <input> zu speichern, genau wie bei 'min' und 'max' und den Eingabewert bei jeder Änderung auf den Monatsnamen zu setzen.

Da toLocaleString nicht in jedem Browser unterstützt wird, empfiehlt es sich, stattdessen dieses Array zu codieren: var monthName = [ 'janvier', 'février', etc. ];.

Beiseite: new Date(0, n + 1) generiert ein Datum im Jahr 1900. Aber das ist OK für das, was wir hier tun.

var monthName = []; 
 

 
for(var n = 0; n < 12; n++) { 
 
    monthName[n] = (new Date(0, n + 1)).toLocaleString('fr-FR', { month: "long" }); 
 
} 
 

 
$(function(){ 
 
    $('.select-date .btn:last-of-type').on('click', function() { 
 
     var btn = $(this); 
 
     var input = btn.closest('.select-date').find('input'); 
 
     if (input.attr('max') == undefined || parseInt(input.attr('month')) < parseInt(input.attr('max'))) {  
 
     input.attr('month', parseInt(input.attr('month'), 10) + 1); 
 
     input.val(monthName[parseInt(input.attr('month'), 10) - 1]); 
 
     } else { 
 
     btn.next("disabled", true); 
 
     } 
 
    }); 
 
    $('.select-date .btn:first-of-type').on('click', function() { 
 
     var btn = $(this); 
 
     var input = btn.closest('.select-date').find('input'); 
 
     if (input.attr('min') == undefined || parseInt(input.attr('month')) > parseInt(input.attr('min'))) {  
 
     input.attr('month', parseInt(input.attr('month'), 10) - 1); 
 
     input.val(monthName[parseInt(input.attr('month'), 10) - 1]); 
 
     } else { 
 
     btn.prev("disabled", true); 
 
     } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="input-group btn-group select-date"> 
 
<button class="btn btn-default" type="button"><i class="fa fa-caret-left"></i>-</button> 
 
<input type="text" class="form-control" value="mai" month="5" min="1" max="12" readonly> 
 
<button class="btn btn-default" type="button"><i class="fa fa-caret-right"></i>+</button> 
 
</div>

Answer 2

Klasse erstellen:

var Months=function(){ 

this.months=[ 
"January" 
... //all months 
]; 

}; 

Months.prototype.getMonthName=function(num){ 

if (num<0 || num>11){ 

    console.log("no such month!"); 
    return null; 
} 


return this.months[num]; 
}; 

Beispiel Nutzung:

var months=new Months(); 
months.getMonthName(0); //January