javascriptで動的カレンダーをHTMLに出力したいです。

Question

今生年月日をセレクトボックスに作ってみました。
しかし、このソースコードは非常に大きな問題点があります。
最後の日を出力する時もうし二月なのに31日まで出力しております。
私は今年月まで入力したら日は自動的に年月に合わせて日を出力したいです。

var date = new Date(1960, 02);

var dateCnt = date.getUTCDate();

---

上のソースコードを利用し、解決挑戦したができませんでした。

---

<th bgcolor=#D8D8D8>生年月日
		<td>
			<select name="year">
				<option value="">
				<script>
				   for( var i=new Date( ).getFullYear( )-50 ; i<new Date( ).getFullYear( )+2 ; i++){
				       document.write( "<option value="+i+">"+i );
				   }
				</script>
			</select>&nbsp;&nbsp;年&nbsp;
			<select name="month">
				<option value="">
				<script>
				   for( var i=1 ; i<=12 ; i++){
				       if(i<10){ document.write( "<option value='0"+i+"'>0"+i ); }
				       else   { document.write( "<option value='"+i+"'>"+i ); }
				   }
				</script>
			</select>&nbsp;&nbsp;月&nbsp;
			<select name="day">
				<option value="">
				<script>
				   for( var i=1 ; i<=31 ; i++){
				       if(i<10){ document.write( "<option value='0"+i+"'>0"+i ); }
				       else   { document.write( "<option value='"+i+"'>"+i ); }
				   }
				</script>
			</select>&nbsp;&nbsp;日

Answer 1

「JavaScript select 年月日」で検索。

【javascriptでありえない日付をselectで選択させない制御 - Qiita】
http://qiita.com/terrym/items/115e899294221902781f

【簡単にHTMLの年月日のプルダウンを作る方法 - ITS】
https://its-office.jp/blog/js/2016/03/08/ymd-html.html

【セレクトボックスの日付を切り替え | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website】
http://shanabrian.com/web/javascript/change-day.php

Comments

[iwbtbij]

ありがとうございます。
http://shanabrian.com/web/javascript/change-day.php＜＜これを見て解決しました。
さすが日本は整理が綺麗ですね。
後もっとご参照頂きます。

Answer 2

一般的には大きな問題ではなく選択後データ送信時にバリデートして
選択した日付は存在しない旨アラートを出せば済む話です。

実際2017年3月31日を選んで、その後3月を2月に変更すれば結局31日が
選ばれた状態になります。それを見越してあれやこれや例外処理を入れても
結局未入力をさけるためにも送信時のチェックは必要なので
がんばってもさほど意味がない作業になります。

sample

一応形だけ

<script>
document.addEventListener('change',function(e){
  var t=e.target;
  if(t.nodeName=="SELECT" && (t.name=="year" || t.name=="month")){
   setDay();
  }
});
function setDay(){
  var f=document.getElementById("f1");
  var y=f.elements["year"].options[f.elements["year"].selectedIndex].value;
  var m=f.elements["month"].options[f.elements["month"].selectedIndex].value;
  var d=f.elements["day"];
  for(var i=d.options.length-1;i>0;i--){
    d.removeChild(d.options[i]);
  }
  if(y!=="" && m!==""){
    for(var i=1 ; i<=(new Date(y,m,0)).getDate(); i++){
      var n=document.createElement("option");
      n.setAttribute("value",i);
      n.appendChild(document.createTextNode(("0"+i).substr(-2,2)));
      d.appendChild(n);
    }
  }
  
}
window.onload=function(){
  var f=document.getElementById("f1");
  var y=f.elements["year"];
  var m=f.elements["month"];
  var myDate=new Date( );
  for(var i=myDate.getFullYear()-50 ; i<myDate.getFullYear( )+2 ; i++){
    var n=document.createElement("option");
    n.setAttribute("value",i);
    n.appendChild(document.createTextNode(i));
    y.appendChild(n);
  }
  for(var i=1 ; i<=12 ; i++){
    var n=document.createElement("option");
    n.setAttribute("value",i);
    n.appendChild(document.createTextNode(("0"+i).substr(-2,2)));
    m.appendChild(n);
  }
  setDay();
}
</script>

<form id="f1">
<select name="year">
<option value="">----</option>
</select>年
<select name="month">
<option value="">--</option>
</select>月
<select name="day">
<option value="">--</option>
</select>日

Answer 3

JavaScriptのDateオブジェクトの月は0～11までなので、2を指定すると3月になります。
そして面倒な末日計算などしなくても、このDateの日の部分に0を指定すると前月の末日になります。
末日さえわかればあとはできるのではないでしょうか？

JavaScriptで月末日を取得する
http://qiita.com/akase244/items/f558b9b3c51804103d16