JavaScript Dynamic Drop Down 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.

JavaScript Dynamic Day Dropdown Selector

Easily generate a dynamic day dropdown menu using JavaScript. This function creates an HTML <select> element with options for all days of the month, automatically highlighting the current day for a seamless user experience.

HTML
<select id="day" name="day" class="form-select">
</select>
JavaScript
(() => {
    const daySelected = new Date().getDate(); // Get the current day
    let options = '<option value="">Day</option>'; // Add default option

    for (let i = 1; i <= 31; i++) {
      // Ensure two-digit format (e.g., 01, 02)
        const day = i.toString().padStart(2, '0');
        // Mark selected day
        const selected = i === daySelected ? ' selected' : ''; // Mark selected day
        options += '<option value="'+day+'"'+selected+'>'+day+'</option>';
    }

    document.getElementById("day").innerHTML = options;
})();
Preview Try it yourself

JavaScript Dynamic Month Dropdown Selector

Effortlessly create a dropdown menu for selecting months using JavaScript. This script generates an HTML <select> element populated with month names, and you can customize it to display months in different languages for a localized user experience.

Localize Month Names

To display month names in your preferred language, use the language dropdown below. Select a language to update the month names dynamically in the dropdown menu. This feature makes your application adaptable to a global audience.

HTML
<select id="month" name="month" class="form-select">
</select>
JavaScript
(() => {
    // List of month names
    const months = [
        "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    ];

    // Get the current month (0-based index)
    const selectedMonth = new Date().getMonth();

    // first option
    let options = '<option value="">Month</option>';

    months.forEach((month, index) => {
        const monthNumber = index + 1;
        // Ensure 2-digit format (01, 02, ...)
        const monthValue = monthNumber.toString().padStart(2, "0");
        const isSelected = index === selectedMonth ? ' selected' : '';
        options += '<option value="'+monthValue+'"'+isSelected+'>('+monthNumber+') '+month+'</option>';
    });

    // Populate the dropdown
    document.getElementById("month").innerHTML = options;
})();
Preview Try it yourself

JavaScript Dynamic Year Dropdown Selector

Easily generate a dropdown menu for selecting years using JavaScript. This function creates an HTML <select> element with a range of years, making it perfect for date selection forms or other applications requiring year input.

HTML
<select id="year" name="year" class="form-select">
</select>
JavaScript
(() => {
    const year_start = 1940; // Start year
    const year_end = new Date().getFullYear(); // Current year
    const year_selected = 1992; // Pre-selected year

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

    // Generate year options dynamically
    for (let year = year_end; year >= year_start; year--) {
        const selected = year === year_selected ? ' selected' : '';
        options += '<option value="'+year+'"'+selected+'>'+year+'</option>';
    }

    // Populate the dropdown menu
    document.getElementById("year").innerHTML = options;
})();
Preview Try it yourself

Create Arabic Numeral Year Dropdown Using JavaScript

Easily generate a dropdown list of years displayed in Arabic numerals with this JavaScript function. It dynamically converts numbers into Arabic numeral format, ensuring compatibility with applications requiring localized number representation.

HTML
<select id="arabic-year" name="arabic-year">
</select>
JavaScript
(() => {
    // Convert a number to Arabic numeral representation
    const toArabic = (number) => {
        const arabicDigits = {
            0: "\u06f0",
            1: "\u06f1",
            2: "\u06f2",
            3: "\u06f3",
            4: "\u06f4",
            5: "\u06f5",
            6: "\u06f6",
            7: "\u06f7",
            8: "\u06f8",
            9: "\u06f9",
        };

        return number
            .toString()
            .split("")
            .map((digit) => arabicDigits[digit] || digit) // Fallback for unexpected input
            .join("");
    };

    const year_start = 1940;
    const year_end = new Date().getFullYear(); // Current year
    const year_selected = 1992;

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

    for (let year = year_end; year >= year_start; year--) {
        const isSelected = year === year_selected ? " selected" : "";
        const arabicYear = toArabic(year);
        options += `<option value="${arabicYear}"${isSelected}>${arabicYear}</option>`;
    }

    document.getElementById("arabic-year").innerHTML = options;
})();
Preview Try it yourself

This script not only converts numbers to Arabic numerals but also dynamically creates a year range, allowing you to easily integrate it into forms or dropdown menus requiring Arabic numeral years.

Related: