Изменить номер на месяц

Question

Я хочу изменить цифры на слова впереди.

Ex: 0 = январь/1 = февраль/2 = март ....

Это мой код 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> 

Это мой код 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); 
     } 
    }); 
}) 

Пожалуйста вы можете помочь мне решить проблему, я действительно потерян.

Answer 1

Я пытался держать как можно ближе к исходному коду. Я также предположил, что вам нужны имена месяцев на французском языке.

Идея состоит в том, чтобы сохранить номер месяца как атрибут вашего <input>, так же, как вы сделали для «min» и «max» и установить значение ввода для имени месяца при каждом изменении.

Поскольку 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