1

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

Pierre
  • 33
  • 6

2 Answers2

0

Create class:

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

example usage:

var months=new Months();
months.getMonthName(0); //January
Maciej Sikora
  • 19,374
  • 4
  • 49
  • 50
0

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>
Arnauld
  • 5,847
  • 2
  • 15
  • 32
  • Glad it helped. Please note that I've slightly updated my answer, so that `monthName` is a zero-based array. (Just to be consistent with my remark about hardcoding it, if necessary.) – Arnauld Jul 26 '16 at 15:56