【jQuery】【JavaScript】うるう年も対応した年月日の日付フォームの作成方法

公開日： 2014/11/09 : javaScript, jQuery

年月日（うるう年対応）した日付フォーム(jQuery)のソースが
検索してもイマイチだったので自作しました。

<html>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
 $(function(){

   var now_year = new Date().getFullYear();
   
   for (var i = now_year - 100; i <= now_year ;i++) {
    $(".year").append("<option value='"+i+"'>"+i+"</option>");
   }

   for (var i = 1; i <= 12 ;i++) {
    $(".month").append("<option value='"+i+"'>"+i+"</option>");
   }
  
  //月日に応じて日数を決める
  $(".date").change(function () {
   
   var year	 = $("[name=year] 	option:selected").val();
   var month = $("[name=month]	option:selected").val();
   var day   = new Date(year, month, 0).getDate();

   $(".day").empty();
   $(".day").append("<option value='0'>---</option>");

   for (var i = 1; i <= day ;i++) {
    $(".day").append("<option value='"+i+"'>"+i+"</option>");
   }
   
  });

 });
</script>

<select name="year" class="year date">
	<option value="0">---</option>
</select>

<select name="month" class="month date">
	<option value="0">---</option>
</select>

<select name="day" class="day">
	<option value="0">---</option>
</select>

</html>

JavaScript うるう年を対応するポイント

new Date(year, month, 0).getDate();です。
Date(year, month, 0)だと末日
Date(year, month, 1)だと初日になります。

getYear()の場合だと+1900しなくてはいけませんが、
getFullYear()を使えば普通に現在の年を取得することができます。

うるう年対応の年月日の説明

年は、現在の年月より100年の範囲です。(mixi,facebookも誕生年の設定範囲は100年)
月は、１～１２月まで。
日は、１～３１日でうるう年と月の末日に対応。
年月が変更されたときに日を買えるので class=”date”は年月のみです。
日までdateをつけると日を選択できなくなります。