JSFiddle - React, Tailwind, and code Playground
by joplomacedo
HTML
<select class="year"></select>
<select class="month"></select>
<select class="day"></select>
JavaScript
;(function () {
var d = document,
qs = d.querySelector.bind(d),
ael = function ( el, evt, handler, b ) {
return el.addEventListener(evt, handler, b);
};
var date = new Date(),
selected_year = date.getFullYear(),
selected_month = 0,
selected_day = 1;
function isLeapYear( year )Â {
return new Date(year, 1, 29).getMonth() == 1;
}
function getDays( year, month ) {
var days = [],
day = 0;
if ( month == 1 ) {
total_days = isLeapYear(year) ? 29 : 28;
} else {
total_days = month % 2 ? 30 : 31;
}
for (;day++ < total_days;) {
days.push({
val: day,
alias: day
});
}
return days;
}
function getMonths() {
return [
{ val: 0, alias: 'January' },
{ val: 1, alias: 'February' },
{ val: 2, alias: 'March' },
{ val: 3, alias: 'April' },
{ val: 4, alias: 'May' },
{ val: 5, alias: 'June' },
{ val: 6, alias: 'July' },
{ val: 7, alias: 'August' },
{ val: 8, alias: 'September' },
{ val: 9, alias: 'October' },
{ val: 10, alias: 'November' },
{ val: 11, alias: 'December' }
];
}
function getYears() {
var todays_year = date.getFullYear(),
starting_year = todays_year - 121,
year = starting_year,
years = [];
for (; year++ < todays_year;) {
years.push({
alias: year,
val: year
});
}
return years;
}
function populateSelect( select, options, initially_selected ) {
var innerHTML = '';
options.forEach(function (option) {
var is_selected = option.val === initially_selected;
innerHTML += '<option ' + (is_selected ? 'selected' : '') + ' value="' + option.val + '">' + option.alias + '</option>'
});
select.innerHTML = innerHTML;
}
var $year = qs('.year'),
$month = qs('.month'),
$day = qs('.day');
populateSelect($year, getYears(), selected_year);
...