JavaScript Dynamic Year Month Day Select
How to Dynamically Populate Year Month and Day Drop down List With JavaScript
Year Drop down List Using JavaScript
Demo year:
Click on the edit (pen) icon and try it yourself.
<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 Drop down List Using JavaScript
Demo days:
Click on the edit (pen) icon and try it yourself.
<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 Drop Down List Using JavaScript
Demo months:
Select the month name in the local languages
Click on the edit (pen) icon and try it yourself.
<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 Drop Down List Using JavaScript
Demo Arabic digit year :
Click on the edit (pen) icon and try it yourself.
<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>
