竹形誠司 ブログ
Java+MySQL+Tomcat    »トピック一覧
掲示板へのスパムが多いため、「ご質問」のコーナーはユーザー登録制とさせていただきました。お手数ですが、上の「新規ユーザーの登録」メニューより登録をお願いします。
帳票Web
アプリケーション

受注開発始めました
詳しくは こちら
竹形 誠司 著/ラトルズ刊
JSP帳票アプリケーション実践開発入門
JSP帳票アプリケーション
実践開発入門

JSP業務アプリケーション短期開発入門
JSP業務アプリケーション
短期開発入門

Java+MySQL+Tomcatで始めるWebアプリケーション構築入門
Java+MySQL+Tomcatで始めるWebアプリケーション構築入門

Java+MySQL+Tomcatで作る掲示板とブログ
Java+MySQL+Tomcatで作る
掲示板とブログ
閏年を考慮に入れた日付指定
by 竹形 誠司[takegata]
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番目の引数はそれぞれ年、月、日の初期値を指定します。

<!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>

投稿:竹形 誠司[takegata]/2008年 05月 14日 23時 58分 /更新:2009年 01月 27日 19時 09分