JQuery - автоматически добавлять текущие месяцы года к выпадающему списку

Question

Я пытаюсь автоматически добавлять текущие месяцы года, в течение текущего года в раскрывающийся список Bootstrap.

В настоящее время я добавляю их вручную, так как я не очень хорошо разбираюсь в JavaScript.

Как я могу автоматически добавлять текущие месяцы, оставшиеся в этом году, в список?

Теперь мы в феврале, это не добавит январского, потому что оно уже прошло.

Я сделал bootply, чтобы вы могли видеть, что я имею в виду.

http://www.bootply.com/N2H0BAoapL

Answer 1

Для достижения этой цели вы можете получить месяц от текущей даты, используя getMonth(). Оттуда вы можете перебрать оставшиеся месяцы и заполнить select, что-то вроде этого:

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
var month = (new Date()).getMonth(); 
 
for (; month < monthNames.length; month++) { 
 
    $('select').append('<option>' + monthNames[month] + '</option>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select>

Эта базовая логика может быть в свою очередь сводится к этому:

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
 
var html = monthNames.slice((new Date()).getMonth()).map(function(month) { 
 
    return '<option>' + month + '</option>'; 
 
}).join(''); 
 
$('select').html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select></select>

Answer 2

В качестве альтернативы, где Int l, месячные имена доступны с Date.prototype.toLocaleString. Это может привести к использованию языка браузера по умолчанию или его можно установить.

См. MDN Date.prototype.toLocaleString() и опорную матрицу. Я не работаю в IE 10 или ниже, но в других браузерах есть хорошая поддержка.

E.g.

function addRemainingMonthOptions(id, lang) { 
 

 
    // Make sure element exists 
 
    var sel = document.getElementById(id); 
 
    if (!sel) return; 
 

 
    // Get current date, set day to 1 so not affected by adding months 
 
    var d = new Date(); 
 
    d.setDate(1); 
 
    
 
    // Add options until end of year 
 
    do { 
 
    month = d.toLocaleString(lang,{localeMatcher: 'best fit', month:'short'}) 
 
    sel.appendChild(new Option(month, month)); 
 
    d.setMonth(d.getMonth() +1); 
 
    } while (d.getMonth() > 0) 
 
} 
 

 
// Add remaining months in browser default langauge (lang is undefined) 
 
addRemainingMonthOptions('theMonth0') 
 
// … in Russian 
 
addRemainingMonthOptions('theMonth1', 'ru') 
 
// … in Arabic 
 
addRemainingMonthOptions('theMonth2', 'ar')

<select id="theMonth0"> 
 
</select> 
 
<select id="theMonth1"> 
 
</select> 
 
<select id="theMonth2"> 
 
</select>

Answer 3

Ниже мой пример, который помог мне показать Действителен только месяц в течение текущего года или все месяцы за предыдущие года в каскадном раскрывающемся месяце.

Этот пример ниже заблокирует каскадируемый месяц Каплю если Invalid год выбран и будет также заботиться о текущих действительных месяцах согласно выбору года.

var currentYear = new Date().getFullYear(); 
 
var currentMonth = new Date().getMonth(); 
 
var cascadedDropDownMonthId = "#dropDownYearMonth"; 
 

 
//Adding Last 10 Years to Year Drop Down 
 
for (var i = currentYear;i > currentYear - 10 ; i--) 
 
{ 
 
$("#dropDownYear1").append('<option value="'+ i.toString() +'">' +i.toString() +'</option>'); 
 
} 
 
    
 
//Disabling Month Dropdown in case of invalid Selections. 
 
$(cascadedDropDownMonthId).prop("disabled", true); 
 

 
$("#dropDownYear1").change(function() { 
 

 
      var currentSelectedValue = $(this).val(); 
 
      
 
      if (currentSelectedValue == "-1") 
 
      { 
 
       $(cascadedDropDownMonthId).prop("disabled", true); 
 
      } 
 
      else 
 
      { 
 
       $(cascadedDropDownMonthId).prop("disabled", false); 
 
       //Get Current Year from Dropdown and Converting to Integer for performing math operations 
 
       var currentSelectedYear = parseInt($(this).val()); 
 
       
 
       //As Index of Javascript Month is from 0 to 11 therefore totalMonths are 11 NOT 12 
 
       var totalMonths = 11; 
 
       if (currentSelectedYear == currentYear) { 
 
        totalMonths = currentMonth; 
 
       } 
 
       var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 
 
       //Emptying the Month Dropdown to clear our last values 
 
       $(cascadedDropDownMonthId).empty(); 
 
       
 
       $(cascadedDropDownMonthId).append('<option value="-1">-Month-</option>');         
 

 
       //Appending Current Valid Months 
 
       for (var month = 0; month <= totalMonths; month++) { 
 
        $(cascadedDropDownMonthId).append('<option value="'+ (month+1) + '">' + monthNames[month] + '</option>'); 
 
       } 
 
      } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
        
 
<select id="dropDownYear1"> 
 
    <option value="-1">-Year-</option> 
 
</select> 
 
<select id="dropDownYearMonth"> 
 
    <option value="-1">-Month-</option> 
 
</select>