Dropdown List Using JavaScript

How to Dynamically Populate Year Month and Day Dropdown List With JavaScript

Year Dropdown List Using JavaScript

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

<script>
(function () {
    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' : '');
        option += '<option value="' + i + '"' + selected + '>' + i + '</option>';
    }
  
    document.getElementById("year").innerHTML = option;
})();
</script>

Day Dropdown List Using JavaScript

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

<script>
(function () {
    let day_selected = (new Date).getDate(); // current day
    let option = '';
    option = '<option>Day</option>'; // first option
  
    for (let i = 1; i < 32; i++) {
        // value day number with 0. 01 02 03 04..
        let day = (i <= 9) ? '0' + i : i;
      
        // or value day number 1 2 3 4..
        // let day = i;
      
        let selected = (i === day_selected ? ' selected' : '');
        option += '<option value="' + day + '"' + selected + '>' + day + '</option>';
    }
    document.getElementById("day").innerHTML = option;
})();
</script>

Month Dropdown List Using JavaScript

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

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

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

        // value month number with 0. 01 02 03 04..
        let month = (month_number <= 9) ? '0' + month_number : month_number;
      
        // or value month number 1 2 3 4..
        // let month = month_number;
      
        // or value month names January February
        // let month = months[i];
      
        let selected = (i === month_selected ? ' selected' : '');
        option += '<option value="' + month + '"' + selected + '>' + months[i] + '</option>';
    }
    document.getElementById("month").innerHTML = option;
})();
</script>

Create Arabic Number Year Dropdown List Using JavaScript

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

<script>
(function () {
    function 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>