JSFiddle - React, Tailwind, and code Playground

by raviteja gunda

HTML

<div class="field-container month">
				<select name="dobMonth" class="dobMonth">
					<option value="">Month</option>
					<option value="1">January</option>
					<option value="2">February</option>
					<option value="3">March</option>
					<option value="4">April</option>
					<option value="5">May</option>
					<option value="6">June</option>
					<option value="7">July</option>
					<option value="8">August</option>
					<option value="9">September</option>
					<option value="10">October</option>
					<option value="11">November</option>
					<option value="12">December</option>
				</select>
			</div>
			<div class="field-container">
				<select name="dobDay" class="dobDay">
                    <option value="">Day</option>
				</select>
			</div>
			<div class="field-container">
				<select name="dobYear" class="dobYear">
				</select>
			</div>

CSS

.field-container {
    display: inline-block;
}

JavaScript

var month = 1;
var year = 2014;
var day, seq, daysInMonth, prevDaysInMonth=-1;


// Initializing the Year drop down from current year to current year - 100
	var yearOption = '<option value="">Year</option>';
	for(i=year; i >= year-100; i--) {
		yearOption = yearOption + '<option value='+i+'>'+i+'</option>';
	}
	$('.dobYear').append(yearOption);

// on change of Month/Year drop downs call the "daysInAMonth" function to calculate the number of days and repopulate days dropdown if needed
	$('.dobMonth').change(function(){
		month = $(this).val();
		daysInAMonth();
	});
	$('.dobYear').change(function(){
		year = $(this).val();
		daysInAMonth();
	});


function daysInAMonth() {
	//calculate the number of days in a given month and year
    daysInMonth = new Date(year,month,1,-1).getDate();
    // if the number of days is not the same as previous dropdown (number of            days) value then repopulate Days DropDown
	if(daysInMonth != prevDaysInMonth) {
        prevDaysInMonth = daysInMonth;
		day = '<option value="">Day</option>';
		$('.dobDay').html('');
		for(i=1; i<= daysInMonth; i++) {
			day = day + '<option value='+i+'>'+(i < 10 ? "0"+i : i) +'</option>';
		}
		$('.dobDay').append(day);

	}
};