JavaScriptを使って毎週土曜日の日付を取得し、プルダウンリストに表示させる方法

このQ&Aのポイント
  • JavaScriptを使用して、毎週土曜日の日付のみを取得し、プルダウンリストに表示・選択させる方法を教えてください。
  • 以前に教えていただいたコードを参考に、土曜日の日付のみを表示・選択できるようにしたいです。
  • ご教授いただけると幸いです。よろしくお願いいたします。
回答を見る
  • ベストアンサー

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

毎週土曜日のみの日付を取得、プルダウンリストに表示させたい。 よろしくお願い致します。 表題の通りなのですが、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> もしお分かりの方がいらっしゃいましたら、ご教授頂けると幸いです。 どうぞよろしくお願い致します。

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

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

>今日の日付から7日間空けて最初の土曜日 for ( var i = 7; i < 100; i+=7 ){ と、7日後から始めるようにしてください。 i=0というのは今日(0日後)から始めるという意味になります。

patsaysnow
質問者

お礼

無事解決することが出来ました。 最後までお付き合い頂きありがとうございました。

その他の回答 (3)

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

#2です。 >今日の日付から7日間空けて最初の土曜日を表示する方法 7日を含むのか含まないのか不明ですが…  i を1から始めればよいだけでは? (算出方法を考えてみればわかるはず。考え方は#1様が説明なさっています。)

patsaysnow
質問者

お礼

無事解決することが出来ました。 最後までお付き合い頂きありがとうございました。

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

document.writeって好きになれないので… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head><title>test</title> <script type="text/javascript"><!-- window.onload = function() { // id:対象セレクトのid, days:出力する日数 var id = 'test', days = 10; var i, o = document.getElementById('test').options; var dt, d = new Date(); o.length = 0; d.setHours((6 - d.getDay()) * 24); for (i=0; i<days; i++) { dt = d.getFullYear() + '年'; dt += ('0' + (d.getMonth() + 1) ).match(/..$/) + '月'; dt += ('0' + d.getDate()).match(/..$/) + '日'; o[o.length] = new Option(dt + '(土)', dt); d.setHours(7 * 24); } } --></script> </head> <body> <select name="test" id="test"> <option value="defaule">Defaule</option> </select> </body> </html>

patsaysnow
質問者

お礼

早速のご回答、誠にありがとうございます。 ひとつお伺いしたいのですが、今日の日付から7日間空けて最初の土曜日を表示する方法というのはあるのでしょうか? 例えば今日の日付(3月9日)だったら次の土曜日は13日になるのですが、9日から13日までは7日間のスパンが空いていないので、その次の土曜日の20日が表示されるといったようなことです。 もしお分かりになるようでしたらご教授頂けると幸いです。 どうぞよろしくお願い致します。

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

ざっと・・・ var d = new Date(); var n= 6;//土曜日 d.setDate( d.getDate() - d.getDay() % 7 + n); とすると、曜日を7で割った余りを日付からひくと必ず 日曜日になるので、今日のつぎの土曜日がひろえます。 これを7ずつ加算していくといいでしょう。 (selectはみにくいので今回は普通にテキストを書いています) <script> var Youbi = new Array( "日", "月", "火", "水", "木", "金", "土" ); var d = new Date(); var n= 6;//土曜日 d.setDate( d.getDate() - d.getDay() % 7 + n); for ( var i = 0; i < 100; i+=7 ){ d.setDate( d.getDate() +i); var sYer = "" + d.getFullYear(); var sMon = ( "00" + ( d.getMonth() + 1 ) ).match( /..$/ );; var sDat = ( "00" + d.getDate() ).match( /..$/ ); document.write(sYer + "年" + sMon + "月" + sDat + "日<br>"); } </script>

patsaysnow
質問者

お礼

早速のご回答、誠にありがとうございます。 ひとつお伺いしたいのですが、今日の日付から7日間空けて最初の土曜日を表示する方法というのはあるのでしょうか? 例えば今日の日付(3月9日)だったら次の土曜日は13日になるのですが、9日から13日までは7日間のスパンが空いていないので、その次の土曜日の20日が表示されるといったようなことです。 もしお分かりになるようでしたらご教授頂けると幸いです。 どうぞよろしくお願い致します。

関連するQ&A

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

    お世話になります。 友人から、「セレクトボックスの日付の並びがおかしい。直してほしい」と頼まれたのですが、開いてみたら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日間分」のセレクトボックスを表示できるようにするにはどこをどう書き換えれば良いのでしょうか? お手数ですが、どうかよろしくお願いします。

  • 翌日の日付表示で土日を抜きたい

    質問させていただきます。 次回の会合部屋の予約可能日付を表示させるスクリプトを考えています。まず1日後の日付表示を考えているのですが、1日後が土曜日或いは日曜日の際には翌週の月曜日が表示されるようにしたいです。 現状は下記のとおり1日後の日付を表示する事しかできません。 <? $youbi = array("日","月","火","水","木","金","土"); $d=mktime(0,0,0,date("m"),date("d")+1,date("y")); print date("Y年m月d日",$d)." (".$youbi[date("w",$d)].")"; ?> 土曜日と日曜日は表示から省かれるようにする方法を教えてください。

    • ベストアンサー
    • PHP
  • 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>

  • 「~○ヶ月○日」という表示方法 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> お願いします!!

  • 日付や時刻を取得する関数について

    JavaScriptで var date = new Date() ; var d = date.getDate(); で今日の日付を取得できると思うのですが、 自分の環境は日本なので今現在では6(日)を取得します。 それでは例えば外国の別の場所でこのスクリプトを実行したら その国の日付をちゃんと取得できているのでしょうか? getUTCDate()ととの違いもよくわからないので、そこらへんも含めて解説していただけないでしょうか?

  • プルダウンで日付と曜日を取得する

    開発環境 Visual Web Developer 2008 Express Edition(言語はVB.NET) 「年」「月」「日」のプルダウンと「曜日」を表示するラベルが配置された画面を作ろうとしています。 年と月のプルダウンに関しては、2000~2020年・1~12月までをhtmlで追加してやれば良いのですが、 たとえば、 2000年の1月を選択したらポストバックして2000年1月に存在する日を「日」のプルダウンに表示させ、さらに、日付のプルダウンで28日と選択したらそれに対応する曜日をラベルに表示させる、 といった場合にはどのようなコードを書けば可能でしょうか? 宜しくお願い致します。

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

    初心者です。 質問集をいろいろ探して日付生成できたのですが月末、月初がうまくいきません。 イヌでも・・やトホホ・・など探してますがマッチする情報が見つからないのでわかったら教えて下さい。 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> ======================================== あまり複雑にしないで解決する方法ありますか。

  • 毎週月水土のみ日付をプルダウンに2ヶ月間分表示

    http://okwave.jp/qa/q5738655.html 上記に似たような質問があったのですが、ここから進めることができませんでしたので質問させていただきました。 皆様のお知恵をかしていただければ幸いです。 javascriptで、当日から2ヶ月間分の月水土の日付と曜日を出力し、プルダウンに表示させるといったものを行いたいです。 <select name="" class=""> <option value="2013-01-20">1月19日(土)</option> <option value="2013-01-15">1月21日(月)</option> <option value="2013-01-17">1月23日(水)</option> <option value="2013-01-20">1月26日(土)</option> <option value="2013-01-15">1月28日(月)</option> <option value="2013-01-17">1月30日(水)</option> <option value="2013-01-20">2月2日(土)</option> <option value="2013-01-15">2月4日(月)</option> <option value="2013-01-17">2月6日(水)</option> <option value="2013-01-20">2月9日(土)</option> <option value="2013-01-15">2月11日(月)</option> <option value="2013-01-17">2月13日(水)</option> <option value="2013-01-20">2月16日(土)</option> <option value="2013-01-15">2月18日(月)</option> <option value="2013-01-17">2月20日(水)</option> <option value="2013-01-20">2月23日(土)</option> <option value="2013-01-15">2月25日(月)</option> <option value="2013-01-17">2月27日(水)</option> <option value="2013-01-20">3月2日(土)</option> <option value="2013-01-15">3月4日(月)</option> <option value="2013-01-17">3月6日(水)</option> <option value="2013-01-20">3月9日(土)</option> </select> 最終的にこのような形で出力されるのが理想です。 別の質問でにたものは土曜日だけでしたので、その他の曜日を追加する事ができませんでした。 もしお分かりの方がいらっしゃいましたら、ご教授頂けると幸いです。 以上、よろしくお願い致します。

  • JavaScriptの件

    html&cssを勉強中の超初心者です。この度JavaScriptの本を購入し下記のソースを入力しましたが、「ページでエラーが発生しました。」と出てしまいます。どなたかどこが間違えているのか教えて頂けませんか?よろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Dateオブジェクト</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language="JavaScript"> <!-- var youbi= new Array(7); youbi [0] = "(日曜日) "; youbi [1] = "(月曜日) "; youbi [2] = "(火曜日) "; youbi [3] = "(水曜日) "; youbi [4] = "(木曜日) "; youbi [5] = "(金曜日) "; youbi [6] = "(土曜日) "; function NowTime(){ var now = new Date(); var yy = new.getFullYear(); var mm = new.getMonth(); var dd = new.getDate(); var wd = new.getDay(); var h = new.getHours(); var m = new.getMinutes(); var s = new.getSeconds(); var TSUKIHI = yy + "年" + (mm+1) + "月" + dd + "日"; var JIKOKU = h + "時" + m + "分" + s + "秒"; alert(TSUKIHI + youbi[wd] + JIKOKU + "です"); } //--> </script> </head> <body> <h1>現在の日時</h1> ※ボタンをクイックすると、現在の日時が表示されます。<br> <br> <BUTTON onClick="NowTime()">現在の日時を表示</BUTTON> </body> </html>

  • ホームページで毎月第3日曜日を表示しその日を過ぎた

    ホームページで毎月第3日曜日の日付を表示していますが、月が替わると翌月に切り替わってしまいます。その日(当月の第3日曜日)が過ぎてから翌月の第3日曜日に切り替えたいのですが、判定方法をどなたかご存知の方がいらっしゃいましたらご伝授いただけますでしょうか? <script> var d=new Date(); d.setDate(14); for(var i=0;i<1;i++){ document.write(d.getFullYear()+"年"+(d.getMonth()+2)+"月"+(21-d.getDay())+"日 (日曜日)"); d.setMonth(d.getMonth()+1); } </script> で現在コーディングしています。 当月と翌月を出す事も考えています。 宜しくお願い致します。

専門家に質問してみよう