Webアプリケーションで日付を入力するためのインターフェイスに、プルダウン形式のリスト・ボックスが使われることがよくありますが、「2月31日」のようなアリエナイ日付が指定された場合にどうするかは、頭の痛い問題です。
そこで、アリエナイ日付が指定された場合に、自動的に補正するリストボックスをJavaScriptで書いてみました。指定された「月」が4,6,9,11の場合、「日」が31であれば強制的に30にセットします。
「月」が「2」の場合は、指定された「年」が閏年かどうかを調べて、閏年の場合は29日より大きな日付が指定されていた場合には29日に、閏年でない場合は28日より大きな日付が指定されていた場合に28日に補正します。
funcDateSelectという関数で年、月、日のプルダウンリストを表示します。最初の引数formは、プルダウンリストを表示するフォームのNAME属性で指定した文字列を指定します。これはJavaScriptからDOMを通じてフォーム要素にアクセスするためです。
2番目の引数nameはフォームの中で複数の日付を指定するための識別名です。ここにfromを指定すると、「年」のSELECT要素にはfrom_year、「月」のSELECT要素にはfrom_month、「日」のSELECT要素にはfrom_dateという名前(NAME属性)がセットされます。
3番目、4番目、5番目の引数はそれぞれ年、月、日の初期値を指定します。
そこで、アリエナイ日付が指定された場合に、自動的に補正するリストボックスをJavaScriptで書いてみました。指定された「月」が4,6,9,11の場合、「日」が31であれば強制的に30にセットします。
「月」が「2」の場合は、指定された「年」が閏年かどうかを調べて、閏年の場合は29日より大きな日付が指定されていた場合には29日に、閏年でない場合は28日より大きな日付が指定されていた場合に28日に補正します。
funcDateSelectという関数で年、月、日のプルダウンリストを表示します。最初の引数formは、プルダウンリストを表示するフォームのNAME属性で指定した文字列を指定します。これはJavaScriptからDOMを通じてフォーム要素にアクセスするためです。
2番目の引数nameはフォームの中で複数の日付を指定するための識別名です。ここにfromを指定すると、「年」のSELECT要素にはfrom_year、「月」のSELECT要素にはfrom_month、「日」のSELECT要素にはfrom_dateという名前(NAME属性)がセットされます。
3番目、4番目、5番目の引数はそれぞれ年、月、日の初期値を指定します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD><TITLE>日付選択</TITLE>
<SCRIPT TYPE="text/javascript">
function funcDateSelect(form,name,year,month,date){
document.write("<SELECT name=\"" + name + "_year\"");
document.write(" ONCHANGE=\"funcDateCheck('" + form + "','" + name + "')\"");
document.write(">");
for(i=year-2;i<=year+2;i++){
document.write("<OPTION VALUE=\"" + i + "\"");
if(i==year){
document.write(" SELECTED");
}
document.write(">"+i);
}
document.write("</SELECT>");
document.write("<SELECT name=\"" + name + "_month\"");
document.write(" ONCHANGE=\"funcDateCheck('" + form + "','" + name + "')\"");
document.write(">");
for(i=1;i<=12;i++){
document.write("<OPTION VALUE=\"" + i + "\"");
if(i==month){
document.write(" SELECTED");
}
document.write(">"+i);
}
document.write("</SELECT>");
document.write("<SELECT name=\"" + name + "_date\"");
document.write(" ONCHANGE=\"funcDateCheck('" + form + "','" + name + "')\"");
document.write(">");
for(i=1;i<=31;i++){
document.write("<OPTION VALUE=\"" + i + "\"");
if(i==date){
document.write(" SELECTED");
}
document.write(">"+i);
}
document.write("</SELECT>");
}
function funcDateCheck(form,name){
year = Number(eval("document." + form + "." + name + "_year.value"));
month = Number(eval("document." + form + "." + name + "_month.value"));
date = Number(eval("document." + form + "." + name + "_date.value"));
switch(month){
case 2:
leap = 0;
if(year%4==0){ //西暦が4で割り切れる年は閏年。ただし
if(year%100==0){//西暦が100で割り切れる場合は閏年ではない。ただし
if(year%400==0){//西暦が400で割り切れる場合は閏年。
leap=1;
}else{
leap=0;
}
}else{
leap=1;
}
}
if(date>28+leap){
objDate = eval("document."+form+"."+name+"_date");
objDate.selectedIndex = 28+leap-1;
}
break;
case 4:
case 6:
case 9:
case 11:
if(date>30){
objDate = eval("document."+form+"."+name+"_date");
objDate.selectedIndex = 29;
}
break;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SCRIPT TYPE="text/javascript">
funcDateSelect("form1","from",2008,5,14);
</SCRIPT>
〜
<SCRIPT TYPE="text/javascript">
funcDateSelect("form1","to",2008,6,14);
</SCRIPT>
</FORM>
</BODY>
</HTML>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD><TITLE>日付選択</TITLE>
<SCRIPT TYPE="text/javascript">
function funcDateSelect(form,name,year,month,date){
document.write("<SELECT name=\"" + name + "_year\"");
document.write(" ONCHANGE=\"funcDateCheck('" + form + "','" + name + "')\"");
document.write(">");
for(i=year-2;i<=year+2;i++){
document.write("<OPTION VALUE=\"" + i + "\"");
if(i==year){
document.write(" SELECTED");
}
document.write(">"+i);
}
document.write("</SELECT>");
document.write("<SELECT name=\"" + name + "_month\"");
document.write(" ONCHANGE=\"funcDateCheck('" + form + "','" + name + "')\"");
document.write(">");
for(i=1;i<=12;i++){
document.write("<OPTION VALUE=\"" + i + "\"");
if(i==month){
document.write(" SELECTED");
}
document.write(">"+i);
}
document.write("</SELECT>");
document.write("<SELECT name=\"" + name + "_date\"");
document.write(" ONCHANGE=\"funcDateCheck('" + form + "','" + name + "')\"");
document.write(">");
for(i=1;i<=31;i++){
document.write("<OPTION VALUE=\"" + i + "\"");
if(i==date){
document.write(" SELECTED");
}
document.write(">"+i);
}
document.write("</SELECT>");
}
function funcDateCheck(form,name){
year = Number(eval("document." + form + "." + name + "_year.value"));
month = Number(eval("document." + form + "." + name + "_month.value"));
date = Number(eval("document." + form + "." + name + "_date.value"));
switch(month){
case 2:
leap = 0;
if(year%4==0){ //西暦が4で割り切れる年は閏年。ただし
if(year%100==0){//西暦が100で割り切れる場合は閏年ではない。ただし
if(year%400==0){//西暦が400で割り切れる場合は閏年。
leap=1;
}else{
leap=0;
}
}else{
leap=1;
}
}
if(date>28+leap){
objDate = eval("document."+form+"."+name+"_date");
objDate.selectedIndex = 28+leap-1;
}
break;
case 4:
case 6:
case 9:
case 11:
if(date>30){
objDate = eval("document."+form+"."+name+"_date");
objDate.selectedIndex = 29;
}
break;
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<SCRIPT TYPE="text/javascript">
funcDateSelect("form1","from",2008,5,14);
</SCRIPT>
〜
<SCRIPT TYPE="text/javascript">
funcDateSelect("form1","to",2008,6,14);
</SCRIPT>
</FORM>
</BODY>
</HTML>
投稿:竹形 誠司[takegata]/2008年 05月 14日 23時 58分
/更新:2009年 01月 27日 19時 09分