• ベストアンサー

プルダウンメニュー日付生成で月の変わり目について

初心者です。 質問集をいろいろ探して日付生成できたのですが月末、月初がうまくいきません。 イヌでも・・やトホホ・・など探してますがマッチする情報が見つからないのでわかったら教えて下さい。 100にち分を表示するようにしてます。 このソースは短くてシンプルなので気に入ってます、 ======================================== <SCRIPT type="text/javascript"> window.onload = function() { var d, str, elm = document.getElementById('gdate'); var day = new Date(); day.setMilliseconds(24*60*60*1000); for (d=1; d<100; d++) { str = (day.getMonth() + 1) + '/' + (day.getDate() -1); elm.options[d] = new Option(str, str); day.setMilliseconds(24*60*60*1000); } } </SCRIPT><SELECT name="HIDUKE" id="gdate"> <OPTION>日付選択</OPTION> </SELECT> ======================================== あまり複雑にしないで解決する方法ありますか。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

元のスクリプトがなぜ『 day.getDate() -1 』にしているのか理由が思い当たりませんが… 普通に暦の日付を表示したいのなら、-1をしなければ良いだけでは? >100にち分を表示するようにしてます。 現状だと99日分ではないかと思いますが… <script type="text/javascript"> window.onload = function() { var str, d = 1, day = new Date(); var elm = document.getElementById('gdate'); while ( d < 101 ) { str = (day.getMonth() + 1) + '/' + day.getDate(); elm.options[d++] = new Option(str, str); day.setHours(24); } } </script> 1行減ったのと、ほかにも少し短くなったかも…

Naodes
質問者

お礼

非常に分かりやすくシンプルですごく良いです! ありがとうございました。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

>day.setMilliseconds(24*60*60*1000); としてるのは日付をインクリメントしてたいのでしょう・・・ 理解しないままこういう姑息なことをすると結局手動で デクリメントが必要になって、日付が0になったり月末日が 拾えなかったりします。 素直に日付のインクリメントは今日の日付に1たしましょう <SCRIPT> window.onload = function() { var d, str, elm = document.getElementById('gdate'); var day = new Date(); for (d=1; d<100; d++) { str = (day.getMonth() + 1).toString() + '/' + day.getDate().toString(); var op=document.createElement("option"); op.setAttribute("value",str); op.appendChild(document.createTextNode(str)); elm.appendChild(op); day.setDate(day.getDate()+1); } } </SCRIPT> <SELECT name="HIDUKE" id="gdate"> <OPTION>日付選択</OPTION> </SELECT>

noname#111181
noname#111181
回答No.1

本当に小さなミスです。 下記の通り1行修正して下さい。 ------------------------------- str = (day.getMonth() + 1) + '/' + (day.getDate() -1);  ↓ str = (day.getMonth() + 1) + '/' + day.getDate();

Naodes
質問者

お礼

ありがとうございました。 -1 を付けたのは今日の日付が出ないので荒業を使った事が原因だったんですね。

関連するQ&A

  • selectタグで日付を生成

    プルダウンメニューで、指定の日付をYYYY/MM/DDの形式で生成して表示されたいと思っています。 具体的な方法は、先日別の質問にて御教授いただきました。 しかし途中で仕様が変更になってしまって、今回新たにご質問させて頂いております。 希望としては、本日から4営業日(土日祝日休み)から30日先までの日付をYYYY/MM/DDの形式で生成して表示されたいと思っています。 そして、初期表示として <option value="default" selected>-------</option> が先頭にくるようにして、 2行目からスクリプトでの書き換えを行なうようにしたいと思っています。 日付指定の補足ですが、 本日から4営業日後の日付は、土日祝を含めての日数で表示させたいと思います。 例) 2009/7/16 だった場合 (プルダウンメニューで) 2009/7/23 2009/7/24 2009/7/25 2009/7/26 2009/7/27 … 2009/8/15 ちょっと心配ですが、祝日もスクリプトでカウントされるのでしょうか。。 質問内容が分かりづらいかと存じますが、 何卒よろしくお願いいたします。 以前の質問URLはこちらです。 http://oshiete1.goo.ne.jp/qa5108724.html <html> <head> <script type="text/javascript"> window.onload = function() { var d, str, elm = document.getElementById('delidate'); var day = new Date(); day.setMilliseconds(4*24*60*60*1000); for (d=0; d<26; d++) { str = day.getFullYear() + '/' + (day.getMonth() + 1) + '/' + day.getDate(); elm.options[d] = new Option(str, str); day.setMilliseconds(24*60*60*1000); } } </script> </head> <body> <select name="delidate" id="delidate"> <option value="default" selected>-------</option> <option value="4日後">4日後</option> <option value="5日後">5日後</option> <option value="6日後">6日後</option> <option value="7日後">7日後</option> <option value="8日後">8日後</option> <option value="9日後">9日後</option> <option value="10日後">10日後</option> <option value="10日後">11日後</option> <option value="10日後">12日後</option> <option value="10日後">13日後</option> <option value="10日後">14日後</option> <option value="10日後">15日後</option> <option value="10日後">16日後</option> <option value="10日後">17日後</option> <option value="10日後">18日後</option> <option value="10日後">19日後</option> <option value="10日後">20日後</option> <option value="10日後">21日後</option> <option value="10日後">22日後</option> <option value="10日後">23日後</option> <option value="10日後">24日後</option> <option value="10日後">25日後</option> <option value="10日後">26日後</option> <option value="10日後">27日後</option> <option value="10日後">28日後</option> <option value="10日後">29日後</option> <option value="30日後">30日後</option> </select> </body> </html>

  • 毎週土曜日のみの日付を取得、プルダウンリストに表示させたい。

    毎週土曜日のみの日付を取得、プルダウンリストに表示させたい。 よろしくお願い致します。 表題の通りなのですが、Javascriptで「毎週土曜日の日付のみ」を取得して、 プルダウンリストで表示・選択させたいと考えております。 以前、任意での指定日以降(明日や明後日など)の日付と曜日を取得して、 プルダウンで表示・選択できるコード(下記のものです)を教えて頂いたのですが、 このような感じで土曜日の日付のみを表示・選択できるようになると理想です。 <script language="javascript"> //var Today = new Date(); //var d = new Date(); var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" ); /* ひと月後までを表示 */ for ( var i = 3; i < 31; i++ ){ var d = new Date(); d.setDate( d.getDate() + i ); /* 各要素を抽出(月と日は2桁で)*/ var sYer = "" + d.getFullYear(); var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );; var sDat = ( "00" + d.getDate() ).match( /..$/ ); var sDay = Youbi[ d.getDay() ]; /* <option>を書き出し */ document.write( "<option value = '" + sYer + "年" +sMon + "月" + sDat + "日" + "'>" +sYer + "年" + sMon + "月" + sDat + "日(" + sDay + ")</option>\n" ); } </script> もしお分かりの方がいらっしゃいましたら、ご教授頂けると幸いです。 どうぞよろしくお願い致します。

  • SELECTの生成でselected設定ができない

    全くもって原因がわからず、行き詰まっています。 どなたか助けてください。宜しくお願いします。 <script> window.onload=function(){ var now=new Date(); var nowDay=now.getDate(); var objD=document.FRM.selD; for(i=0; i<31; i++){ d=i+1; objD.options[i] = new Option(d+"日", d); if(d==nowDay){ objD.options[i].selected=true; } } } </script> <form name="FRM"> <select name="selD"></select> </form>

  • javascriptで質問

    javascript初心者です。 日付で自動的に変わるようなメニューが作りたいのですが もっとシンプルに簡潔にできますか? また、開いているページのタブの色を他と変えたいのですができますか? 以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript"> <!-- var day01 = new Date(); var year01 = day01.getFullYear(); //年 var mon01 = day01.getMonth() + 1; //月 var date01 = day01.getDate(); //日 var day02 = new Date(); day02.setDate( day02.getDate()+1 ); var year02 = day02.getFullYear(); //年 var mon02 = day02.getMonth() + 1; //月 var date02 = day02.getDate(); //日 var day03 = new Date(); day03.setDate( day03.getDate()+2 ); var year03 = day03.getFullYear(); //年 var mon03 = day03.getMonth() + 1; //月 var date03 = day03.getDate(); //日 var day04 = new Date(); day04.setDate( day04.getDate()+3 ); var year04 = day04.getFullYear(); //年 var mon04 = day04.getMonth() + 1; //月 var date04 = day04.getDate(); //日 var day05 = new Date(); day05.setDate( day05.getDate()+4 ); var year05 = day05.getFullYear(); //年 var mon05 = day05.getMonth() + 1; //月 var date05 = day05.getDate(); //日 var day06 = new Date(); day06.setDate( day06.getDate()+5 ); var year06 = day06.getFullYear(); //年 var mon06 = day06.getMonth() + 1; //月 var date06 = day06.getDate(); //日 var day07 = new Date(); day07.setDate( day07.getDate()+6 ); var year07 = day07.getFullYear(); //年 var mon07 = day07.getMonth() + 1; //月 var date07 = day07.getDate(); //日 // --> </script> </head> <body> <ul class="menu"> <script type="text/javascript"> <!-- document.write('<li><a href="'+year01+mon01+date01+'.html">'+mon01+'月'+date01+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year02+mon02+date02+'.html">'+mon02+'月'+date02+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year03+mon03+date03+'.html">'+mon03+'月'+date03+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year04+mon04+date04+'.html">'+mon04+'月'+date04+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year05+mon05+date05+'.html">'+mon05+'月'+date05+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year06+mon06+date06+'.html">'+mon06+'月'+date06+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year07+mon07+date07+'.html">'+mon07+'月'+date07+'日'+'</a></li>'); //--> </script> </ul> </body> </html>

  • ○日後から○日間分のセレクトボックス:どこを直せばでいいのしょう?

    お世話になります。 友人から、「セレクトボックスの日付の並びがおかしい。直してほしい」と頼まれたのですが、開いてみたらJavascriptでした。 <option value = '' selected>------</option> <script language="javascript"> var Today = new Date(); var d = new Date(); var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" ); /* 2日後~14日後 までを表示 */ for ( var i = 2; i < 15; i++ ){ d.setDate( Today.getDate() + i ); /* 各要素を抽出(月と日は2桁で)*/ var sYer = "" + d.getFullYear(); var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );; var sDat = ( "00" + d.getDate() ).match( /..$/ ); var sDay = Youbi[ d.getDay() ]; /* <option>を書き出し */ document.write( "<option value = '" + sYer + sMon + sDat + "'>" + sYer + "年" + sMon + "月" + sDat + "日(" + sDay + ")</option>\n" ); } </script> </select> となっているのですが、現状ですと、このスクリプトで出来たセレクトボックスの最上段の、明後日の日付から来月の1日までの日付はちゃんと表示されるのですが、その先がいきなり1ヶ月跳んでその次は1ヶ月と2日跳んで…といった表示になってしまいます。 2006年04月29日(土) 2006年04月30日(日) 2006年05月01日(月) 2006年06月01日(木) 2006年07月03日(月) 2006年08月03日(木) 2006年09月04日(月) と言った具合です。 私はこのスクリプトを見ても計算内容か殆ど理解できないので、バグを見つけて直すことが出来ません。 このスクリプトで、月や年をまたいでも正常に「今日の2日後から14日間分」のセレクトボックスを表示できるようにするにはどこをどう書き換えれば良いのでしょうか? お手数ですが、どうかよろしくお願いします。

  • 「~○ヶ月○日」という表示方法 2

    以前こちらで同じ質問をさせていただきました。 教えていただいた方にもう1度聞こうと思ったんですが ここではそれはできないようなので、どなたか教えてください! 「HPを開設してから○ヶ月と○日が経ちました」 というような表示をしたいのです。 以前教えていただいた方法でうまく表示されていたのですが、 最近ちょっとくるってるんです。 本当は4ヶ月と22日(5/4現在)なんですが 5ヶ月と8日と表示されてしまいます。 なぜでしょうか? いろいろ検索してまわったのですが、 どれも何日という表示方法で、○ヶ月というのは見つかりませんでした。 以前教えていただいたのは↓です。 <SCRIPT> var StrMsg = ""; var dtToday = new Date;//現在の日付を取得する。 var StDay = new Date(2001,12,12);//Date(年,月,日)開設した年月日を入れておく。 //現在の日付から開設日付を引き何日経過したのかを取得する if(StDay.getMonth()>=dtToday.getMonth()+1){ var strMonth = StDay.getMonth()-(dtToday.getMonth()+1); }else{ var strMonth = (dtToday.getMonth()+1)-StDay.getMonth(); } if(dtToday.getDate()>=StDay.getDate()){ var strDate = dtToday.getDate()-StDay.getDate(); }else{ var strDate = StDay.getDate()-dtToday.getDate(); } //HTMLへと出力する if(strMonth != 0){ StrMsg = StrMsg + strMonth+"ヶ月と"; } if(Date != 0){ StrMsg = StrMsg + strDate+"日"; } if(StrMsg.length != 0){ document.write("HPを開設してから"+ StrMsg +"が経ちました"); }</SCRIPT> お願いします!!

  • 日付範囲指定について

    よろしくお願いします。 年、月をコンボボックスで表示させ、選択できるようにしてあります。jsの内容は以下です。 ----------------------------------------------------- var ymin = 1950; var ymax = 2050; function getToday(){ var t = new Date(); var y = t.getYear(); if(1900 > y){y += 1900;} var m = t.getMonth()+1; var d = t.getDate(); fyear(y); fmonth(m); fday(d); } function fyear(thisyear){ var obj = document.getElementById('year'); ymin =ymin - 0; ymax =ymax - 0; var j = 1; for(i = ymin; ymax > i; i++){ var str = i.toString() + "年"; obj.options[j] = new Option(str); obj.options[j].value = i; if(i == thisyear){ obj.options[j].selected = true; } j++; } } function fmonth(thismonth){ var obj = document.getElementById('month'); for(i = 1; 12 >= i; i++){ var str = i.toString() + "月"; obj.options[i] = new Option(str); obj.options[i].value = i; if(i == thismonth){ obj.options[i].selected = true; } } } ----------------------------------------------------- これを利用して日付範囲指定(例として、2006年1月~2008年8月ような感じ)を行いたいのですが、可能でしょうか? 自分で試した方法ですと、前半(2006年1月)は表示できるのですが、後半(2008年8月)が表示できませんでした。 試したソースは以下 --------------------------------------------------- <!-- var ymin = 1950; var ymax = 2050; function getToday(){ var t = new Date(); var y = t.getYear(); if(1900 > y){y += 1900;} var m = t.getMonth()+1; var d = t.getDate(); fyear(y); fmonth(m); tyear(y); tmonth(m); } function fyear(thisyear){ var obj = document.getElementById('year'); ymin =ymin - 0; ymax =ymax - 0; var j = 1; for(i = ymin; ymax > i; i++){ var str = i.toString() + "年"; obj.options[j] = new Option(str); obj.options[j].value = i; if(i == thisyear){ obj.options[j].selected = true; } j++; } } function fmonth(thismonth){ var obj = document.getElementById('month'); for(i = 1; 12 >= i; i++){ var str = i.toString() + "月"; obj.options[i] = new Option(str); obj.options[i].value = i; if(i == thismonth){ obj.options[i].selected = true; } } } function tyear(thisyear){ var obj = document.getElementById('tyear'); ymin =ymin - 0; ymax =ymax - 0; var j = 1; for(i = ymin; ymax > i; i++){ var str = i.toString() + "年"; obj.options[j] = new Option(str); obj.options[j].value = i; if(i == thisyear){ obj.options[j].selected = true; } j++; } } function tmonth(thismonth){ var obj = document.getElementById('tmonth'); for(i = 1; 12 >= i; i++){ var str = i.toString() + "月"; obj.options[i] = new Option(str); obj.options[i].value = i; if(i == thismonth){ obj.options[i].selected = true; } } } //--> どうかよろしくお願いします。

  • selectタグで日付を生成

    プルダウンメニューで、本日から4日後 から 1か月先までの日付をYYYY/MM/DDの形式で生成して表示されたいのですが、それをvalueに入れる方法が分かりません。 下記までは書いてみたんですが、 <option value="???">のところに何と書いていいのか分からなくなってしまいました。。 for文などループ処理で書いた方がキレイだとは思いますが、 イマイチ分からなかったので、併せて御教授いただければと思います。 <script type="text/javascript"> document.write(AddDate(+4)+'~'+ AddDate(+30)); function AddDate( n ){ var day = new Date( (new Date).getTime()+n*24*60*60*1000); return (day.getFullYear() + "/" + (day.getMonth() + 1) + "/" + day.getDate()); } </script> <select name="delidate"> <option value=""><script type="text/javascript">document.write(AddDate(+4));</script></option> <option><script type="text/javascript">document.write(AddDate(+5));</script></option> <option><script type="text/javascript">document.write(AddDate(+6));</script></option> <option><script type="text/javascript">document.write(AddDate(+7));</script></option> <option><script type="text/javascript">document.write(AddDate(+8));</script></option> <option><script type="text/javascript">document.write(AddDate(+9));</script></option> <option><script type="text/javascript">document.write(AddDate(+10));</script></option> <option><script type="text/javascript">document.write(AddDate(+11));</script></option> <option><script type="text/javascript">document.write(AddDate(+12));</script></option> <option><script type="text/javascript">document.write(AddDate(+13));</script></option> <option><script type="text/javascript">document.write(AddDate(+14));</script></option> <option><script type="text/javascript">document.write(AddDate(+15));</script></option> <option><script type="text/javascript">document.write(AddDate(+16));</script></option> <option><script type="text/javascript">document.write(AddDate(+17));</script></option> <option><script type="text/javascript">document.write(AddDate(+18));</script></option> <option><script type="text/javascript">document.write(AddDate(+19));</script></option> <option><script type="text/javascript">document.write(AddDate(+20));</script></option> <option><script type="text/javascript">document.write(AddDate(+21));</script></option> <option><script type="text/javascript">document.write(AddDate(+22));</script></option> <option><script type="text/javascript">document.write(AddDate(+23));</script></option> <option><script type="text/javascript">document.write(AddDate(+24));</script></option> <option><script type="text/javascript">document.write(AddDate(+25));</script></option> <option><script type="text/javascript">document.write(AddDate(+26));</script></option> <option><script type="text/javascript">document.write(AddDate(+27));</script></option> <option><script type="text/javascript">document.write(AddDate(+28));</script></option> <option><script type="text/javascript">document.write(AddDate(+29));</script></option> <option><script type="text/javascript">document.write(AddDate(+30));</script></option> </select> 分かり難く申し訳ないですが、宜しくお願い致します。

  • JS 日付表示

    JavaScript for文の日付表示について JavaScriptでfor文で日付表示したい場合、月末の最終日を取得するだけでは月の切り替えができないのでしょうか? 今日から一週間後までを表示するアプリを作りたいのですが1/31を過ぎると2/1にならず1/32と表示されてしまいます。 何か間違っている所ありますでしょうか? 以下ソースコード <script type="text/javascript"><!-- var now = new Date(); var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); console.log(now); // Thu Jan 30 2014 00:00:00 GMT+0900 (東京 (標準時)) console.log(new Date(now.getFullYear(), now.getMonth() + 1, 0)); // Fri Jan 31 2014 00:00:00 GMT+0900 (東京 (標準時)) for(i=0;i<100;i++){ document.write(y + "/" + m + "/" + (d + i).toString() + "<br>"); } // --></script> <body> </body>

  • 日付から曜日を表示したい

    現在、HTMLでJavaScriptを用いたホームページを作成しています。 プルダウンリストの日付から閏年に対応しているソースコードを参考にして組んだまでは 良かったのですが、プルダウンリストで選択された年月日から曜日の抽出がうまくいかず悩んでいます。 以下、少しわかりにくいですがイメージです。 2015   年   1   月   1  日    → ○曜日 2016       2       2 2017       3       3  ~        ~       ~ 2030       12      31 具体的なヒントやソースを頂けないでしょうか? よろしくお願いします。 原状のbodyの中身を書いておきます。  <form name="formDate"> <label>申請日:</label> <select name="selectYear" onchange="setSelectMonth()"></select> <label>年</label> <select name="selectMonth" onchange="setSelectDate()"></select> <label>月</label> <select name="selectDate"></select> <label>日</label> <select name="selectWeek" onchange="setSelectyear()" onchange="setSelectMonth()" onchange="setSelectDate()"disabled> <OPTION>日曜日<OPTION>月曜日<OPTION>火曜日<OPTION>水曜日<OPTION>木曜日<OPTION>金曜日<OPTION>土曜日 </select> </form> <script type="text/javascript"> <!--初期値設定--> var Now = new Date(); var NowYear = Now.getFullYear(); var NowMonth = Now.getMonth()+1; var NowDate = Now.getDate(); var NowWeek = Now.getDay(); <!--閏年--> function Uruu( Year ){ var uruu = ( Year%400==0 ) ? true : ( Year%100==0 ) ? false : ( Year%4==0 ) ? true : false; return uruu; } <!--年--> function setSelectYear(){ for(var y=NowYear;y<NowYear+6;y var select = document.formDate.selectYear; var option = select.appendChild( document.createElement('option') ); option.value = y; option.text = y; option.selected = ( y==NowYear ) ? 'selected' : false; } setSelectMonth(); } setSelectYear(); <!--月--> function setSelectMonth(){ var Year = document.formDate.selectYear.options[document.formDate.selectYear.selectedIndex].value; var select = document.formDate.selectMonth;// while( select.options.length ){ select.removeChild( select.options[0] ); } for(var m=1;m<=12;m++){ var option = select.appendChild( document.createElement('option') ); option.value = m; option.text = m; option.selected = ( Year==NowYear ) ? ( ( m==NowMonth ) ? 'selected' : false ) : ( ( m==1 ) ? 'selected' : false ); option.disabled = ( Year==NowYear ) ? ( ( m<NowMonth ) ? 'disabled' : false ) : false; } setSelectDate(); } <!--日--> function setSelectDate(){ var Year = document.formDate.selectYear.options[document.formDate.selectYear.selectedIndex].value; var Month = document.formDate.selectMonth.options[document.formDate.selectMonth.selectedIndex].value; var days = [31,( Uruu(Year) ? 29 : 28 ),31,30,31,30,31,31,30,31,30,31]; var select = document.formDate.selectDate; while( select.options.length ){select.removeChild( select.options[0] );} for(var d=1;d<=days[Month-1];d++){ var option = select.appendChild( document.createElement('option') ); option.value = d; option.text = d; option.select = ( Year==NowYear && Month==NowMonth ) ? ( ( d==NowDate ) ? 'selected' : false ) : ( ( d==1 ) ? 'selected' : false ); option.disabled = ( Year==NowYear && Month==NowMonth ) ? ( ( d<NowDate ) ? 'disabled' : false ) : false; } } </script>

専門家に質問してみよう