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

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 天），再填充一個顯示當前日期的下拉列表，同時顯示該月的所有天數？ 任何幫助將不勝感激。 PS，這也可以更動態地完成嗎？

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

 $(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 元素。

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>