JSFiddle - React, Tailwind, and code Playground

by Kamal Agarwal

HTML

<div class="birth-container-home">
        <select id ="reg-mn" name = "mm" class="birthmonth-home"><option value="0">Month</option></select>
        <select id ="reg-dt" name = "dd" class="birthdate-home"><option value="0">Date</option></select>
        <select id ="reg-yr" name = "yyyy" class="birthyear-home"><option value="0">Year</option></select>
    </div>

JavaScript

var monthtext=['January','February','March','April','May','June','July','August','September','October','November','December'];

function date_populate(dayfield, monthfield, yearfield){
    var today=new Date();
    var dayfield=document.getElementById(dayfield)
    var monthfield=document.getElementById(monthfield)
    var yearfield=document.getElementById(yearfield)
    for (var i=0; i<31; i++) {
        dayfield.options[i]=new Option(i+1, i+1);
	}
    //dayfield.options[today.getDate()]=new Option(today.getDate(), today.getDate(), true, true) //select today's day
    for (var m=0; m<12; m++) {
        monthfield.options[m]=new Option(monthtext[m], m+1);
	}
    //monthfield.options[today.getMonth()]=new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
    var thisyear=today.getFullYear() - 13;
    for (var y=0; y<100; y++){
        yearfield.options[y]=new Option(thisyear, thisyear);
        thisyear-=1
    }
   // yearfield.options[0]=new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
}


$(function() {
    date_populate("reg-dt", "reg-mn", "reg-yr");
    $('#reg-yr').change(function(){
		 var months =['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var year =  $('#reg-yr').val();
    var month = $('#reg-mn').val();
    var date = $('#reg-dt').val();
	 var today = new Date();
	 var i = 0;
	for(i=month;i <= 12;i++)
	{
		var firstdate=new Date(year,i,date);
   		 var dayDiff = Math.ceil(today.getTime() - firstdate.getTime()) / (1000 * 60 * 60 * 24 * 365);
   		 var age = parseInt(dayDiff);
		
		if(age < 13)
		    break;
	}
   $('#reg-mn').html('')
	for(j=(i-2);j >= 0;j--)
	{
		$('#reg-mn').append('<option value="'+ j +'">'+ months[j] +'</option>')	;
	}
});
    
    $("#registration-yr option[value=" + 1990 +"]").attr("selected","selected") ;
    
    
 });