• ベストアンサー

日付リストボックスの制御について

現在、フォームに 年、月、日のリストボックスをそれぞれ配置して、たとえば、月を選択したときに、その月に対応する日(たとえば、6月を選択した場合は、日のリストボックスには、1~30までの値が入る)を表示させると言う 制御をJavaScriptで実現させたいと考えています。 うるう年の場合も対応したいと考えています。 しかし、JavaScript初心者のために、まったくわからない状態です。 経験者の方々、サンプルソースもしくは、参考になるURL等ありましたら、ご教授お願いします。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • arukamun
  • ベストアンサー率35% (842/2394)
回答No.2

こんばんは おもしろそうなので作って見ました。 曜日鑑別法を実相しています。 ここではTABが使えないので全角の空白が入っていますので、それは置換してしてください。 解らないところがあれば、補足してください。 では、お試しあれ。 <HTML> <BODY onLoad="toDay()"> <SCRIPT LANGUAGE=JavaScript> <!-- function weekDay(y,m,d) {  // 曜日を求めます。   if ( m < 3 ){     y -- ;     m += 12 ;   }   return (y+Math.floor(y/4)-Math.floor(y/100)+Math.floor(y/400)+Math.floor((m*13+8)/5)+d)%7 ; } function maxDay(y,m) {  // 最大日数を求めます。   s = weekDay(y,m,1);   if ( m == 12 ){     y ++ ;     m = 1 ;   } else {     m ++ ;   }   e = weekDay(y,m,1);   if ( e >= s ){     return 28+e-s ;   } else {     return 35+e-s ;   } } function changeDay() {  // 日付を更新します。   var y = eval(document.date.year.value);   var m = eval(document.date.month.selectedIndex+1);   var d = eval(document.date.day.selectedIndex+1);   var maxd = maxDay(y,m);   if ( d > maxd ){     d = maxd ;     document.date.day.selectedIndex = d-1 ;   }   var i ;   for (i=0 ;i<maxd ;i++){     document.date.day.options[i].text = i+1 ;   }   for ( ;i<31 ;i++){     document.date.day.options[i].text = "" ;   }   document.date.week.selectedIndex = weekDay(y,m,d);   return false ; } function toDay() {  // 今日の日付に設定します。   d = new Date();   document.date.year.value = d.getFullYear();   document.date.month.selectedIndex = d.getMonth();   document.date.day.selectedIndex = d.getDate()-1;   changeDay(); } // --> </SCRIPT> <FORM NAME=date> <INPUT NAME=year SIZE=4 onChange="changeDay()"> 年 <SELECT NAME=month onChange="changeDay()"> <OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5<OPTION>6<OPTION>7 <OPTION>8<OPTION>9<OPTION>10<OPTION>11<OPTION>12</SELECT> 月 <SELECT NAME=day onChange="changeDay()"> <OPTION>1<OPTION>2<OPTION>3<OPTION>4<OPTION>5<OPTION>6<OPTION>7<OPTION>8<OPTION>9<OPTION>10<OPTION>11 <OPTION>12<OPTION>13<OPTION>14<OPTION>15<OPTION>16<OPTION>17<OPTION>18<OPTION>19<OPTION>20<OPTION>21 <OPTION>22<OPTION>23<OPTION>24<OPTION>25<OPTION>26<OPTION>27<OPTION>28<OPTION>29<OPTION>30<OPTION>31</SELECT> 日 <SELECT NAME=week disabled> <OPTION>日曜日<OPTION>月曜日<OPTION>火曜日<OPTION>水曜日<OPTION>木曜日<OPTION>金曜日<OPTION>土曜日</SELECT> </FORM> </BODY> </HTML>

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.1

日の select オブジェクトの options プロパティを動的に変更することで可能です。 月末日や閏年の求め方が分からなければ、勉強がてらソースを解読してみてください。 # スクリプト部 <script type="text/javascript"> <!-- function setDayOptions(f) {   // 年月日を取得   var y = f.year.options[f.year.selectedIndex].text;   var m = f.month.selectedIndex + 1;   var d = f.day.selectedIndex + 1;   // 月末日を算出   var last = (m <= 7) ? (30 + m % 2) : (31 - m % 2);   if (m==2) {     last = 28;     if (y%4==0 && (y%100!=0 || y%400==0)) last++;   }   // optionsを変更   f.day.options.length = last;   for (var i = 29; i <= last; i++)     f.day.options[i-1] = new Option(i);   // 元の選択日を設定   f.day.selectedIndex = (d < last ? d : last) - 1; } //--> </script> # フォーム部 <form> <select name="year" onChange="setDayOptions(this.form)"> <option>2003<option>2004 </select>年 <select name="month" onChange="setDayOptions(this.form)"> <option>1<option>2<option>3<option>4<option>5<option>6 <option>7<option>8<option>9<option>10<option>11<option>12 </select>月 <select name="day"> <option>1<option>2<option>3<option>4<option>5 <option>6<option>7<option>8<option>9<option>10 <option>11<option>12<option>13<option>14<option>15 <option>16<option>17<option>18<option>19<option>20 <option>21<option>22<option>23<option>24<option>25 <option>26<option>27<option>28<option>29<option>30<option>31 </select>日 </form> ※閏年にも対応したいとのことですので、年の select の onChange からも日の select を変更する setDayOptions() を呼び出します。 ※スクリプトのインデントに全角空白を使っているので、コピペする場合はタブや半角空白に置換してください。 # 恐らく、このフォームの送信を受け取るCGIって「No.604526:Perlの日付の比較に関して」のものですよね?そちらは解決しましたか?

すると、全ての回答が全文表示されます。