Pierre Pierre - 4 months ago 10
Javascript Question

Change number on month

i want to change the numbers on words in front.

Ex : 0 = January / 1 = February / 2 = March....

This is my 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>


This is my code 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);
}
});
})


Please can you help me to solved the problem, i'm really lost.

I won't the number but the mont

Answer

I've tried to keep as close as possible to your original code. I also assumed that you need the month names in French.

The idea is to store the month number as an attribute of your <input>, just like you did for 'min' and 'max' and to set the input value to the month name on each change.

Because toLocaleString is not supported on every browser, you may want to hardcode this array instead: var monthName = [ 'janvier', 'février', etc. ];.

Aside: new Date(0, n + 1) is generating a date in the year 1900. But that's OK for what we're doing here.

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>