月号换号

Change number on month

我想更改前面单词的数字。

例如: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);
      }
    });
})

请你帮我解决这个问题,我真的迷路了。

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

用法示例:

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

我尽量保持与您的原始代码接近。我还假设您需要法语的月份名称。

想法是将月份数字存储为 <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>