JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<select class="year"></select>
<select class="month"></select>
<select class="day"></select>

JavaScript

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 = 0;

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);
populateSelect($month, getMonths(), selected_month);
populateSelect($day, getDays(selected_year, selected_month), selected_day);


ael($year, 'change',...