Question

我可能正在为您问一个简单的问题，但我仍然是新手，所以请有人帮助我。我有这个html和jQuery代码：

$(document).ready(function() {
    var d = new Date();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();

    $("#month").val(month); 
    $("#year").val(year);    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
<select id="year">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

所以问题是：如何根据当前年份是30、31、28甚至28年（在Fevruary中为29天）来填充一个下拉列表，以显示当前日期，还显示月份中的所有日期？任何帮助将不胜感激。附言而且这可以更动态地完成吗？

Answer 1

好吧，与其写很多options标签，不如让loop为您做... 请在下面检查我的代码，在下面我将给出简要说明。

$(document).ready(function() {
const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
  var qntYears = 4;
  var selectYear = $("#year");
  var selectMonth = $("#month");
  var selectDay = $("#day");
  var currentYear = new Date().getFullYear();
  
  for (var y = 0; y < qntYears; y++){
    let date = new Date(currentYear);
    var yearElem = document.createElement("option");
    yearElem.value = currentYear 
    yearElem.textContent = currentYear;
    selectYear.append(yearElem);
    currentYear--;
  } 

  for (var m = 0; m < 12; m++){
      let monthNum = new Date(2018, m).getMonth()
      let month = monthNames[monthNum];
      var monthElem = document.createElement("option");
      monthElem.value = monthNum; 
      monthElem.textContent = month;
      selectMonth.append(monthElem);
    }

    var d = new Date();
    var month = d.getMonth();
    var year = d.getFullYear();
    var day = d.getDate();

    selectYear.val(year); 
    selectYear.on("change", AdjustDays);  
    selectMonth.val(month);    
    selectMonth.on("change", AdjustDays);

    AdjustDays();
    selectDay.val(day)
    
    function AdjustDays(){
      var year = selectYear.val();
      var month = parseInt(selectMonth.val()) + 1;
      selectDay.empty();
      
      //get the last day, so the number of days in that month
      var days = new Date(year, month, 0).getDate(); 
      
      //lets create the days of that month
      for (var d = 1; d <= days; d++){
        var dayElem = document.createElement("option");
        dayElem.value = d; 
        dayElem.textContent = d;
        selectDay.append(dayElem);
      }
    }    
});

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

有一个名为qntYears的变量，您可以在其中设置要在select年的年份中显示多少年...

在那之后，有一个循环添加了所有月份，这里没什么特别的。

最后一部分很重要，我在年份change中添加了一个selects回调，更改后，它会根据loop重新创建基于年份和当前月份。进行此操作的function是AdjustDays()。

Answer 2

$(document).ready(function() {
    var d = new Date();
    
    //To test 29th Feb 2016 uncomment the below line
    //d = new Date(2016, 01, 29, 10, 33, 30, 0); //
    
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    var date = d.getDate();
    
    $("#month").val(month); 
    $("#year").val(year);    

    $("#date").empty();
    if(month=="1"){
        if($(year).val()%4 == 0){
            for(i=1;i<=29;i++){
               $("#date").append($("<option></option>").attr("value", i).text(i));
            }
        }else{
            for(i=1;i<=28;i++){
                $("#date").append($("<option></option>").attr("value", i).text(i));
            }
        }
    }
    else if(month=="9" || month=="4" || month=="6" || month=="11"){
        for(i=1;i<=30;i++){
            $("#date").append($("<option></option>").attr("value", i).text(i));
        }
    }
    else{
        for(i=1;i<=31;i++){
            $("#date").append($("<option></option>").attr("value", i).text(i));
        }
    }
    $("#date").val(date);
    $('#text').html(d);
    
    //displayCalGrid(month, year); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="date">
    
</select>
<select id="month">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
<select id="year">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

<br>

Today's Date is : &nbsp;<label id="text"></label>

Answer 3

将事件监听器放在月份下拉列表上。从那里，您可以在一个空的选择框中创建“天”列表。我还将使用moment.js，因为它对Date对象具有附加功能。添加一些验证或使每个选择框具有默认的选定值。

使用普通ole javascript。

let year = document.getElementById('year');
let month = document.getElementById('month');
let days = document.getElementById('days');

month.addEventListener('change', function(event) {
    // do calculations here to find out how many days in month
    let dateString = month + "-" + year;
    let dayLength = moment(dateString, "MM-YYYY").daysInMonth();

    // wipe out all of the days
    days.innerHTML = "";

    // add back all the days.
    for(let g = 1; g < dayLength + 1; g++) {
        let option = document.createElement('option');
        option.value = g;
        days.appendChild(option);
    }
});

这只是一种方法，还有其他附加选项的方法。就像使用documentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

或者您可以具有已经生成并放置在dom中的小模板，因此您所要做的就是清空dom元素容器并重新添加dom元素。

用当前日期，月份和年份填充下拉列表

3 个答案: