• ベストアンサー

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

現在、フォームに 年、月、日のリストボックスをそれぞれ配置して、たとえば、月を選択したときに、その月に対応する日(たとえば、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の日付の比較に関して」のものですよね?そちらは解決しましたか?

関連するQ&A

  • エクセル2013のリストボックス

    エクセル2010でワークシート上に配置したリストボックスがあります。 ActiveXではなくフォームコントロールのリストボックスです。 これに11項目のリストを設定してあります。 2010ではまったく問題がないのですが、エクセル2013で開くと下の2項目が選択できません。 2010と2013では互換性がないのでしょうか?

  • リストボックス項目の変更

    javascript初心者です。 ラジオボタンを2つ、複数選択リストボックスが1つあります。どちらのラジオボタンをチェックしているかで、リストボックス内の項目を変化させたいと思っています。 これはjavascriptで実現可能でしょうか?参考になるサイトや方法を教えていただければ嬉しいです。

  • リストボックスでフリー入力したい

    初心者です。 問合せフォームで現在リストボックスで、選択1 選択2 選択3 その他 が選択できるように作成しています。 実際、その他の数が多いので、フリーで入力できるように したいのです。リストボックスでは不可能ですか? 無理でしたら、他の方法でもいいので、実現できる方法 アドバイスお願いします。

  • お願いします! リストボックスの扱い方

    切羽詰まってます。なにとぞお願いします。m(__)m ALLと付けた あるチェックボックスをチェックすると、 その下にある配置した リストボックスが選択できなく なるか ( disabled ) もしくは、リストボックスの 1行目をのぞいて(選択してください、メッセージがある) 全部選択された状態になる、スクリプトはどう書けば いいんでしょう。 本を何冊か買っていろいろみているんですが、具体例が 載ってなくほとほと弱っています。

  • リストボックスの操作について

    現在、リストボックスから数字を選択してます。 この数字は数字毎に内容が決まっていて、知っている人は何も見ないで 数字を選択出来ますが、知らない人は数字に紐づいた内容を 別途紙で確認しながら、選択しなければなりません。 これが面倒なので、リストボックスの矢印をクリックしたら、内容の説明が 開いて、選択すると対応している数字が表示されるようにするには、 どうしたら、出来るのでしょうか? リストボックスの幅は数字1桁分の幅しか可能ではありません。 JavaScriptでは出来ないんですかねぇ・・・ もしそうなら何でどうすれば出来るようになるんでしょうか。 ご教示宜しくお願い致します。

  • リストボックス全選択について

    JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){  var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>

  • ACCESS リストボックスからの選択で

    ACCESSでフォームを作っています。 その中で、条件にあるデータをリストボックスで一覧表示し、その中からデータを選択して、【実行】ボタンで、次のフォームを開くようにしています。 そのときにリストボックスから何も選択していない場合、エラーメッセージを返したいのですが、「選択していない」というのをどうやって判断すればよいでしょうか。 よろしくお願いします。

  • リストボックス(複数選択しない)の場合の選択解除について

    こんにちは。現在ACCESS2000のフォームにリストボックスを配置し、 複数選択は「しない」に設定しています。 リストボックスの項目をどれか一つ選択するか全く選択しないことを 可能としたい(選択している値を再度クリックすると選択解除できるよう にしたい)のですが、うまくいきません。 何か方法がありましたら、ご教示願います。

  • リストボックスのアイテム選択色変更方法

    リストボックスのアイテム選択色変更方法 リストボックスにて、表示アイテムの背景色を設定しました。 が、アイテムを選択すると背景色が分からなくなってしまいます。 と、いう事で、独自のアイテム選択色を作成したいのですが、どうしたら実現できるのでしょうか? 開発手段は、HTML、JavaScript、cssまでとして下さい。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • リストボックスで表示

    例えばhtmlページに [ID、名称(text)]、[あ、い(リストボックス)] があってID,名称を入力して(その下に3つぐらい項目があって) リストボックスで「う」、「え」 と二つあり「う」を選択したら本かパソコンを入力できるようにでき、 「え」と選択したら同じように選択できるようにはどうしたらいいですか。 なお表示されるページはリストボックスの中を変えたら表示される (同じhtml内で) 本を選択したらID,名称,本(リストボックス)であとは見えなくする(Focus)にはどうしたらいいですか もしかしてこれってjavascriptじゃないとできない?

専門家に質問してみよう