プロフィール画面での生年月日編集のサンプル（javascriptで日付自動生成）

#はじめに
以前書いた記事に追加で記載したのですが、タイトルと内容が違うので新たに記載

#サンプル
仮に誕生日が1990年1月1日のユーザーがいるとしましょう。
それで、このユーザーのプロフィール変更画面等で使うことを想定します。

htmlはbootstrapを利用している前提です。

sample.html

<form id="birthdayForm" method="post" accept-charset="utf-8">
	<div class="form-group">
		<label for="" class="col-sm-2 control-label">生年月日</label>
		<div class="form-content col-sm-10">
			<select class="form-control setDay num4" id="year"></select> 年 
			<select class="form-control setDay num2" id="month"></select> 月 
			<select class="form-control setDay num2" id="day"></select> 日 
			<input type="hidden" id="birthday" value="1990-01-01" />
		</div>
	</div>
	<button type="submit" class="btn btn-default" id="submitBtn">生年月日変更</button>
</form>

sample.js

/***************************
 * main flow
 ***************************/
$(function(){
	var birthday = $('#birthday').val();
	if(birthday == '' || !birthday){ 
		birthday = '1980-01-01'; // 誕生日が入っていない場合はデフォルト値をセット
	}
	// 基本的にシステムでセットされるけど値チェック
	if(birthday.length != 10 || !birthday.match(/^\d{4}-\d{2}-\d{2}/){
		alert('生年月日が不正です。');
	}else{
		var date = new Date();
		var nowyear = date.getFullYear();
		var startyear = 1900;
		var endyear = nowyear - 18; // 本サービスは18歳未満は登録禁止としたらこう書く
		setDate(startyear, endyear, birthday); // 日付のセット
	}
	
	/***************************
	 * trigger
	 ***************************/
	$('#year','#month').change(function(){
		setDay();
	});
	$('#submitBtn').click(function(e){
		e.preventDefault();
		var year = $('#year').val();
		var month = $('#month').val();
		var day	= $('#day').val();
		var birthday = year + '-' + month + '-' + day;
		if(birthday.length != 10 || !birthday.match(/^\d{4}-\d{2}-\d{2}/)){
			alert('生年月日が不正です。');
			return;
		}
		$('#birthday').val(birthday);
		$('#birthdayForm').submit();
	});

});

/***************************
 * function
 ***************************/

function setDay(){
	var year 	= $('#year').val();
	var month	= $('#month').val();
	var day		= $('#day').val();
	var lastday	= monthday(year, month);
	var option = '';
	for (var i = 1; i <= lastday; i++) {
		if (i == day){
			option += '<option value="' + zeroPadding(i,2) + '" selected="selected">' + zeroPadding(i,2) + '</option>\n';
		}else{
			option += '<option value="' + zeroPadding(i,2) + '">' + zeroPadding(i,2) + '</option>\n';
		}
	}
	$('#day').html(option);
}

function monthday(year,month){
	var lastday = new Array('', 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
	if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0){
		lastday[2] = 29;
	}
	return lastday[parseInt(month)];
}

function zeroPadding(num,length){
	return ('0000000000' + num).slice(-length);
}

function setDate(startyear, endyear, date){
	var dateArray = date.split('-');
	var selectedYear = dateArray[0];
	var selectedMonth = dateArray[1];
	var selectedDay = dateArray[2];
	var date = new Date();
	var nowyear = date.getFullYear();
	var yearOptions = '';
	var monthOptions = '';
	var dayOptions = '';
	if(!startyear || startyear == ""){
		startyear = nowyear - 30;
	}
	if(!endyear || endyear == ""){
		endyear = nowyear;
	}
	if(startyear > endyear){
		return;
	}
	for (var i = startyear; i <= endyear; i++){
		if(i == parseInt(selectedYear)){ // 0でのパディングを数値に変換
			yearOptions += '<option value="' + i + '" selected="selected">' + i + '</option>';
		}else{
			yearOptions += '<option value="' + i +'">' + i + '</option>';
		}
	}
	for (var j=1; j <= 12; j++){
		if(j == parseInt(selectedMonth)){ // 0でのパディングを数値に変換
			monthOptions += '<option value="' + zeroPadding(j,2) + '" selected="selected">' + zeroPadding(j,2) + '</option>';
		}else{
			monthOptions += '<option value="' + zeroPadding(j,2) +'">' + zeroPadding(j,2) + '</option>';
		}
	}
	var lastday = monthday(selectedYear, selectedMonth);
	for (var k = 1; k <= lastday; k++){
		if(k == parseInt(selectedDay)){ // 0でのパディングを数値に変換
			dayOptions += '<option value="' + zeroPadding(k,2) + '" selected="selected">' + zeroPadding(k,2) + '</option>';
		}else{
			dayOptions += '<option value="' + zeroPadding(k,2) +'">' + zeroPadding(k,2) + '</option>';
		}
	}
	$('#year').html(yearOptions);
	$('#month').html(monthOptions);
	$('#day').html(dayOptions);
}

ご参考まで。