JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<label>Day: </label>
<input list="day" class="birth-day" maxlength="2">
<label>Month: </label>
<input list="month" class="birth-month" maxlength="2">
<label>Year: </label>
<input list="year" class="birth-year" maxlength="4" style="">


<datalist id="day"></datalist>
<datalist id="month"></datalist>
<datalist id="year"></datalist>

<!--4-->

CSS

input{
  border: 1px solid white;
  border-bottom: 1px solid;
  width:100px;
  }

JavaScript

for (d = 1; d < 32; d++){
	var a = ('0' + d).slice(-2)
    $('#day').append('<option value="'+ a +'">');
}

function daysInMonth (month, year) {
  return new Date(year, month + 1, 0).getDate();
}

function generateMonths(year) {
	var arrs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  return arrs.map(function (index) {
    return [index, daysInMonth(index, year)];
  }).filter(function(tuple) {
    return tuple[1] === 31;
  }).map(function(tuple) { return tuple[0] + 1; });
}

$('.birth-day').on('change',function() {
	var now = new Date();
	var selectedYear = $('.birth-year').val() || now.getFullYear();
  var selectedMonth = $('.birth-month').val() || now.getMonth();
  
  generateMonths(selectedYear).forEach(function(i) {
  	$('#month').append($("<option></option>").attr("value", i).text(i));
  });
});