JavaScript Dynamic Year Month Day Select

How To Dynamically Populate Year Month And Day Drop Down List With Javascript. Here Is The Code For Dynamically Creating Day Month Year Year Select Drop down.

Year Drop down select Using JavaScript

Preview year select

HTML JavaScript

<select id="year" name="year"></select>

<script>
(() => {
    let year_satart = 1940;
    let year_end = (new Date).getFullYear(); // current year
    let year_selected = 1992;

    let option = '';
    option = '<option value="">Year</option>'; // first option

    for (let i = year_satart; i <= year_end; i++) {
        let selected = (i === year_selected ? ' selected' : '');
        option += '<option value="' + i + '"' + selected + '>' + i + '</option>';
    }

    document.getElementById("year").innerHTML = option;
})();
</script>

Day Drop down select Using JavaScript

Preview day select

You can set the value of the option with and without zero at the beginning of the number of days

HTML JavaScript

<select id="day" name="day"></select>

<script>
(() => {
    let day_selected = (new Date).getDate(); // current day
    let option = '';
    let day = '';
    option = '<option value="">Day</option>'; // first option

    for (let i = 1; i < 32; i++) {
        // value day number adding 0. 01 02 03 04..
        day = (i <= 9) ? '0' + i : i;

        // or value day number 1 2 3 4..
        // day = i;

        let selected = (i === day_selected ? ' selected' : '');
        option += '<option value="' + day + '"' + selected + '>' + day + '</option>';
    }
    document.getElementById("day").innerHTML = option;
})();
</script>

Month Drop down select Using JavaScript

Preview month select

You can set month selection option value three types

1, month number [1, 2, 3] <option value="1">January</option>
2, by adding a zero at the beginning of the month number [01, 02, 03] <option value="01">January</option>
3, Month name [January, February] <option value="January">January</option>

Month Number Month Number including zero Month Name

Set Month names in local language

To add the month name in local languages, click the language dropdown list below and select the language

Select language

HTML JavaScript

<select id="month" name="month"></select>

<script>
(() => {
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    let month_selected = (new Date).getMonth(); // current month
    let option = '';
    let month_value = '';
    option = '<option value="">Month</option>'; // first option

    for (let i = 0; i < months.length; i++) {
        let month_number = (i + 1);

        // 1, set option value month number adding 0. [01 02 03 04..]
        month_value = (month_number <= 9) ? '0' + month_number : month_number;

        // 2 , or set option value month number. [1 2 3 4..]
        // month_value = month_number;

        // 3, or set option value month names. [January February]
        // month_value = months[i];

        let selected = (i === month_selected ? ' selected' : '');
        option += '<option value="' + month_value + '"' + selected + '>('+month_number+') '+months[i] + '</option>';
    }
    document.getElementById("month").innerHTML = option;
})();
</script>

Create Arabic Number Year Drop Down List Using JavaScript

This JavaScript function converts a number to an Arabic numeral.

Preview Arabic year select

HTML JavaScript

<select id="arabic-year" name="arabic-year"></select>

<script>
(() => {
    const to_arabic = (number) => { 
        number = number.toString();
        let arabic_digit = {
            0: "\u06f0",
            1: "\u06f1",
            2: "\u06f2",
            3: "\u06f3",
            4: "\u06f4",
            5: "\u06f5",
            6: "\u06f6",
            7: "\u06f7",
            8: "\u06f8",
            9: "\u06f9"
        };
        let newValue = "";
        for (let i = 0; i < number.length; i++) {
            newValue += arabic_digit[number[i]];
        }
        return newValue;
    };

    let year_satart = 1940;
    let year_end = (new Date).getFullYear(); // current year
    let year_selected = 1992;

    let option = '';
    option = '<option>Year</option>'; // first option

    for (let i = year_satart; i <= year_end; i++) {
        let selected = (i === year_selected ? ' selected' : '');
        let arabic_number = to_arabic(i); // number convert to Arabic digit
        option += '<option value="' + arabic_number + '"' + selected + '>' + arabic_number + '</option>';
    }

    document.getElementById("arabic-year").innerHTML = option;
})();
</script>