日付プルダウン処理について

Question

お世話になっております。

リンク内容

上記の質問を元に、日付のプルダウンを作成しています。
今回、デフォルトで現在の年月日を選択するようにしました。
そして、以下の手順（①②の順番）でテストしたところ、以下のようになりました。

①1度、年・月・日を全て初期値から他の値に変更し、
②再度、年を初期値に変更すると、
③月と日も初期値に戻ってしまう。

これだと使い勝手が悪いので、②の「年を変更する」と
③で「月・日ともに1が選択される」、または「日のみ1を選択する」ようにしたいのです。

onLoadで読み込むsetSelectYearメソッドから数珠繋ぎに呼ばれるsetSelectMonthメソッド、setSelectDateメソッドを
もう1つずつ別名で作り、

option.selected = ( m==NowMonth );
option.selected = ( d==NowDate );

の所をそれぞれ

option.selected = ( m==1 );
option.selected = ( d==1 );

に変えたものをそれぞれonChangeで呼ぶことも考えたのですが、そこしか変わらないメソッドを増やすのも
ソースの無駄な気がしまして...。
お知恵を貸していただけると幸いです。
よろしくお願いいたします。

html

<td><select name="year" id="selectYear" onchange="setSelectMonth()">
</select>年
<select name="month" id="selectMonth" onchange="setSelectDate()">
</select>月
<select name="date" id="selectDate">
</select>日
</td>

window.onload=function(){
	setSelectYear();
}

var Now = new Date();

//現在年
var NowYear = Now.getFullYear();

//現在月
var NowMonth = Now.getMonth()+1;

//現在日
var NowDate = Now.getDate();

/*
 * 年プルダウン
 */
function setSelectYear(){

	var selectElement = document.getElementById("selectYear");
	var y = 0;

	//現在～10年前分
	for(y = NowYear; y >= NowYear-10; y--){

		var option = document.createElement("option");

		option.value = y;

		option.text = y;

		selectElement.appendChild(option);

		//現在の年選択
		option.selected = ( y==NowYear );
	}
	setSelectMonth();
}

/*
 * 月プルダウン
 */
function setSelectMonth(){

	var m = 0;
	
	var selectElement = document.getElementById("selectMonth");
	var child;

	while(child = selectElement.firstChild){
		selectElement.removeChild(child);
	}

	//12ヶ月分
	for(m = 1; m <= 12; m++){

		var option = document.createElement("option");
		option.value = m;
		option.text = m;
		selectElement.appendChild(option);

		//現在の月選択
		option.selected = (m == NowMonth);

	}
	setSelectDate();
}

/*
 * 日のoptionを更新
 */
function setSelectDate(){

	var d = 0;

	//選択された年を取得
	var y = document.form1.selectYear.options[document.form1.selectYear.selectedIndex].value;

	//選択された月を取得
	var m = document.form1.selectMonth.options[document.form1.selectMonth.selectedIndex].value;


	// 閏年判定
	if (m == 2 && (y % 400 == 0 || (y % 4 == 0 && y % 100 != 0))) {

		//閏年の2月
		var last = 29;

	//それ以外
	}else{
		var lastday = new Array(11);
		lastday = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
		last = lastday[m-1];
	}

	var selectElement = document.getElementById("selectDate");
	var child;

	 while(child = selectElement.firstChild){
		selectElement.removeChild(child);
	 }

	 //1日から月の最終日まで
	 for(d = 1; d <= last; d++){

	    var option = document.createElement("option");
	    option.value = d;
	    option.text = d;
	    selectElement.appendChild(option);

       //現在の日選択
		option.selected = (d == NowDate);
	 }

}

Answer 1

①1度、年・月・日を全て初期値から他の値に変更し、

②再度、年を初期値に変更すると、
③月と日も初期値に戻ってしまう。

存在しない日付があるのでこの処理が正しいです。
たとえば、2020年2月29日が選ばれているときに2019年を選び直すと
2月29日は存在しません。
うるう年じゃなくても31日を選んでいて、小の月を選ぶと31日が存在しません。

これらを解消するために大抵は、

• 年を選ぶと月と日はクリア
• 月を選ぶと日はクリア

という処理を入れておきます。
もちろん上記の処理をしなくても問題ないという認識で運用するなら
存在しない日が選ばれるリスクがある前提で、クリアする処理をはずせばいいでしょう

Comments

[yambejp]

なんか日本語がおかしかったので直しておきました