月の番号を変更

Question

私は前の言葉の数字を変更したいと思います。

例：0 = 1月/ 1 = 2月/ 2 =マーチ....

これは、これは私のコードのJS

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

てくださいです

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

私のコードをHTMLでありますあなたは私が本当に失っている問題を解決するために私を助けることができますか？

Answer 1

を私はあなたの元のコードにできるだけ近く維持しようとしました。私はあなたがフランス語で月の名前を必要とするとも仮定しました。

「min」と「max」と同じように月の数字を<input>の属性として保存し、各変更の入力時に月の値を設定することを考えます。

toLocaleStringはすべてのブラウザでサポートされていないため、var monthName = [ 'janvier', 'février', etc. ];の代わりにこの配列をハードコードすることができます。

脇：new Date(0, n + 1)は、1900年に日付を生成しています。ただし、ここで行っていることは問題ありません。

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

クラスを作成します。

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]; 
}; 

使用例：

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