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

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 还是闰年（Fevruary 为 29 天）再填充一个显示当前日期的下拉列表，同时显示该月的所有日期？任何帮助将不胜感激。附言这也可以更动态地完成吗？

Answer 1

好吧，与其写很多options标签，不如让loop为你做... 请检查我下面的代码，我将在下面给出一个简短的解释。

（此代码使用 jQuery，但使用 vanilla JS 很容易实现）

$(document).ready(function() {
  const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  let qntYears = 4;
  let selectYear = $("#year");
  let selectMonth = $("#month");
  let selectDay = $("#day");
  let currentYear = new Date().getFullYear();

  for (var y = 0; y < qntYears; y++) {
    let date = new Date(currentYear);
    let yearElem = document.createElement("option");
    yearElem.value = currentYear
    yearElem.textContent = currentYear;
    selectYear.append(yearElem);
    currentYear--;
  }

  for (var m = 0; m < 12; m++) {
    let month = monthNames[m];
    let monthElem = document.createElement("option");
    monthElem.value = m;
    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 的年份中显示多少年...

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

最后一部分是重要的，我在年月的selects 中添加了一个change 回调。当它们发生变化时，侦听器会根据年份和当前月份重新创建（使用for loop）天数，这非常有用，因为每个月都有不同的天数（28、29、30、31）。
执行此操作的 function 是 AdjustDays()。

Answer 2

在月份下拉列表中放置一个事件监听器。从那里你可以在一个空的选择框中创建一个“天”列表。我还会使用 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 元素即可。

Answer 3

$(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 4

纯js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items:center;
    flex-direction: column;
}
form span{
    display: block;
    margin: 20px 0;
}
/*make form styling consistent across browsers*/
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
  }

    </style>
</head>
<body>
        <form>
        <span>
            <label for="day">Day:</label>
            <select name="day" id="day"></select>
        </span>
        <span>
            <label for="month">Month:</label>
            <select name="month" id="month"></select>
        </span>
        <span>
            <label for="year">Year:</label>
            <select name="year" id="year">Year:</select>
        </span>
    </form>
    <script>
        //Create references to the dropdown's
const yearSelect = document.getElementById("year");
const monthSelect = document.getElementById("month");
const daySelect = document.getElementById("day");

const months = ['January', 'February', 'March', 'April', 
'May', 'June', 'July', 'August', 'September', 'October',
'November', 'December'];

//Months are always the same
(function populateMonths(){
    for(let i = 0; i < months.length; i++){
        const option = document.createElement('option');
        option.textContent = months[i];
        monthSelect.appendChild(option);
    }
    monthSelect.value = "January";
})();

let previousDay;

function populateDays(month){
    //Delete all of the children of the day dropdown
    //if they do exist
    while(daySelect.firstChild){
        daySelect.removeChild(daySelect.firstChild);
    }
    //Holds the number of days in the month
    let dayNum;
    //Get the current year
    let year = yearSelect.value;

    if(month === 'January' || month === 'March' || 
    month === 'May' || month === 'July' || month === 'August' 
    || month === 'October' || month === 'December') {
        dayNum = 31;
    } else if(month === 'April' || month === 'June' 
    || month === 'September' || month === 'November') {
        dayNum = 30;
    }else{
        //Check for a leap year
        if(new Date(year, 1, 29).getMonth() === 1){
            dayNum = 29;
        }else{
            dayNum = 28;
        }
    }
    //Insert the correct days into the day <select>
    for(let i = 1; i <= dayNum; i++){
        const option = document.createElement("option");
        option.textContent = i;
        daySelect.appendChild(option);
    }
    if(previousDay){
        daySelect.value = previousDay;
        if(daySelect.value === ""){
            daySelect.value = previousDay - 1;
        }
        if(daySelect.value === ""){
            daySelect.value = previousDay - 2;
        }
        if(daySelect.value === ""){
            daySelect.value = previousDay - 3;
        }
    }
}

function populateYears(){
    //Get the current year as a number
    let year = new Date().getFullYear();
    //Make the previous 100 years be an option
    for(let i = 0; i < 101; i++){
        const option = document.createElement("option");
        option.textContent = year - i;
        yearSelect.appendChild(option);
    }
}

populateDays(monthSelect.value);
populateYears();

yearSelect.onchange = function() {
    populateDays(monthSelect.value);
}
monthSelect.onchange = function() {
    populateDays(monthSelect.value);
}
daySelect.onchange = function() {
    previousDay = daySelect.value;
}
    </script>
</body>
</html>