Search code examples
javascriptlistdropdown

Populate dropdown list with current day, month and year using pure javascript


I found a question that interests me and a solution to it is here on this link: https://stackoverflow.com/a/51660131/17222337, but it's in jQuery, but I'm interested in a pure javascript solution. I reviewed what I could do, but found only non working code on this topic in pure javascript. I tried to translate from jQuery into javascript, but the code I get is wrong and does not work. Tell me please, how to make a javascript code from the given jquery code?


Solution

  • I found solution.

    <!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>