Web覚書トップ > JavaScript サンプル > 『年月に合わせて日付の項目数を変更させてみる』
説明

選択フォームで日付を選択してもらえば、入力チェックなどの手間が省けるので良いのですが、月によって日の値は変わってしまうので、存在しない日付が選択できてしまいます。 しかし、日を選択する選択フォームの項目を動的に変更してやれば問題ありません。

実行例
年  月  日 

コード
function setDay(obj){
	obj = obj.form;
	var years = parseInt(obj.years.options[obj.years.selectedIndex].value);
	var months = parseInt(obj.months.options[obj.months.selectedIndex].value);
	var lastday = monthday(years,months);
	var itemnum = obj.days.length;
	if (lastday - 1 < obj.days.selectedIndex) {
		obj.days.selectedIndex = lastday - 1;
	}
	obj.days.length = lastday;
	for (cnt = itemnum + 1;cnt <= lastday;cnt++) {
		obj.days.options[cnt - 1].text = cnt;
	}
}
function monthday(years,months){
	var lastday = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
	if (((years % 4 == 0) && (years % 100 != 0)) || (years % 400 == 0)){
		lastday[1] = 29;
	}
	return lastday[months - 1];
}
<FORM>
<SELECT name="years" onChange="setDay(this);">
<OPTION value="2000">2000</OPTION>〜<OPTION value="2002">2002</OPTION>
</SELECT> 
<SELECT name="months" onChange="setDay(this);">
<OPTION value="1" selected>1</OPTION>〜<OPTION value="12">12</OPTION>
</SELECT> 
<SELECT name="days">
<OPTION value="1" selected>1</OPTION>〜<OPTION value="31">31</OPTION>
</SELECT> 
</FORM>

解説&ステップアップ

年と月の選択フォームが変更された際に、日の選択フォームの項目を動的に変更しています。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)

© hyork@yahoo.co.jp (2001. 5.16)