- ベストアンサー
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>
- kazuya88
- お礼率28% (38/134)
- JavaScript
- 回答数13
- ありがとう数17
- みんなの回答 （13）
- 専門家の回答
質問者が選んだベストアンサー
ぐだぐだだけど、よくかんがえたら、そこからはかんたん？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>ひづけ</title> <select name="delidate" id="delidate"> <option value="" 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="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> <option value="15">15日後</option> <option value="16">16日後</option> <option value="17">17日後</option> <option value="18">18日後</option> <option value="19">19日後</option> <option value="20">20日後</option> <option value="21">21日後</option> <option value="22">22日後</option> <option value="23">23日後</option> <option value="24">24日後</option> <option value="25">25日後</option> <option value="26">26日後</option> <option value="27">27日後</option> <option value="28">28日後</option> <option value="29">29日後</option> <option value="30">30日後</option> </select> <script type="text/javascript"> //@cc_on Number.prototype.zero = function(n){ return ('0000000000'+ this).slice(-n); } Date.prototype.hizuke_JP = function(){ return this.getFullYear().zero(4)+'年'+(this.getMonth()+1).zero(2)+'月'+this.getDate().zero(2)+'日 ('+['日','月','火','水','木','金','土'][this.getDay()]+')'; } function dayCount (y, m, d){ return (y-=(m<3)*1,m+=(m<3)*12,y*365+(y/4|0)-(y/100|0)+(y/400|0)+(306*(m+1)/10|0)-428+d); } var Holiday = function (y0, y1) { var i, y, day; this.List = { }; if (undefined === y1) y1 = y0; for (i = y0; i <= y1; i++) { y = i * 10000; this.List[y + 101] = '元旦'; this.List[y + [109,108,114,113,112,111,110][dayCount(i,1,1)%7]] = '成人の日'; this.List[y + 211] = '建国記念の日'; this.List[y + ((320.8431+0.242194*(i-1980))|0)-(((i-1980)/4)|0)] = '春分の日'; this.List[y + 429] = '昭和の日'; this.List[y + 503] = '憲法記念日'; this.List[y + 504] = 'みどりの日'; this.List[y + 505] = '子供の日'; this.List[y + [716,715,721,720,719,718,717][dayCount(i,7,1)%7]] = '海の日'; this.List[y + [916,915,921,920,919,918,917][dayCount(i,9,1)%7]] = '敬老の日'; this.List[y + ((923.2488+0.242194*(i-1980))|0)-(((i-1980)/4)|0)] = '秋分の日'; this.List[y + [1009,1008,1014,1013,1012,1011,1010][dayCount(i,10,1)%7]] = '体育の日'; this.List[y + 1103] = '文化の日'; this.List[y + 1123] = '勤労感謝の日'; this.List[y + 1223] = '天皇誕生日'; } for (day in this.List){ if (this.List[day]) { i = parseInt(day); if (this.List[day] && (dayCount(i/10000|0,((i%10000)/100|0),i%100) %7) == 0) { this.List[i+1] = '振替休日'; } } } } Holiday.prototype.get = function (y,m,d) { return this.List[y * 10000 + m * 100 + d] || null; }; var s = document.getElementById('delidate'), o, i, y, m, d, b, t; while(o = s.firstChild) s.removeChild(o); s.add(new Option('----/--/--','') /*@if(!@_jscript) */, null /*@end@*/); var now = new Date; var a = new Holiday(now.getFullYear(),now.getFullYear()+1); var eigyo = 0; for (i = 1; i < 31; i++) { now = new Date; now.setHours((i)*24); y = now.getFullYear(); m = now.getMonth()+1; d = now.getDate(); b = now.getDay(); h = a.get(y, m, d); if (!h && (b!=0 && b!=6) && eigyo<4) eigyo++; if (eigyo>3) { t = now.hizuke_JP(); s.add(new Option(t,i) /*@if(!@_jscript) */, null /*@end@*/); eigyo++; } } </script>
その他の回答 (12)
- babu_baboo
- ベストアンサー率51% (268/525)
No12の </input> と <br /> が、きになるじょ
- fujillin
- ベストアンサー率61% (1594/2576)
No4、No8です。 少し時間があったので、No9様のご意見のようなものを、試みに作ってみました。 カレンダーの部分は、以下の過去の質問のものを利用させていただいていますので、ショートコーディングだけど、かなりわかりにくくなっています。 http://oshiete1.goo.ne.jp/qa4373884.html 営業日の判断は、相変わらずリスト形式のままになっていますので、No7様のものを取り入れれば、メンテしなくてもよくなるかも。 スクリプトがオフの場合は、当然、機能しませんけど… <html> <head> <style type="text/css"> #calendar {position:absolute; width:400px; z-index:3; display:none;} #calendar table {margin:3px; float:left; font-size:90%; background-color:#F8F8F8; border-collapse:collapse;} #calendar table caption {font-weight:bold;} #calendar table th,td {border:2px groove GhostWhite;} #calendar table .sat {color:blue;} #calendar table .hol {color:red;} </style> <script type="text/javascript"> var holiday = '[2009/7/20][2009/9/21][2009/9/22][2009/9/23][2009/10/12][2009/11/23][2009/12/23]'; window.onload=function(){ var d=new Date(), dy=d.getFullYear(), dm=d.getMonth(); document.getElementById('calendar').innerHTML = calendar(new Date(dy,dm,1)) + calendar(new Date(dy,dm+1,1)); document.getElementById('button').onclick=disp(); } function clik(evt){ var c, e = evt?evt.target:event.srcElement; if (e.nodeName=='TD'){ if (c=e.className) { alert(c=='none'?'日にちをクリックしてね':'その日は営業日じゃないよ'); } else { c=e.innerHTML; while(e.nodeName!='TABLE') e = e.parentNode; document.getElementById('day').value = e.caption.innerHTML + '/' + c; } } } function disp(){ var flg=false; return function(){ flg=!flg; document.getElementById('calendar').style.display=flg?'block':'none'; document.getElementById('button').innerHTML='カレンダー' + (flg?'消去':'表示'); } } function calendar(day) { var b, c, x, y, m, h, dc, t='<table onclick="clik();">'; c=-new Date(y=day.getFullYear(),m=day.getMonth()).getDay(x=new Date(y,++m,0).getDate(b=-1)); h=t+'<caption>'+y+'/'+m+'</caption><tr>'+'日月火水木金土'.replace(/(.)/g,'<th>$1</th>'); h=h.replace('>日',' class="hol">日').replace('>土',' class="sat">土'); while((b++>5?b=0:b)|c<x) { dc=++c<1|c>x?'none':(b==6?'sat':(b==0|holiday.indexOf('['+y+'/'+m+'/'+c+']')>-1?'hol':'')); h+=(b?'':'</tr><tr>')+'<td class="'+dc+'">'+(c<1|c>x?'-':c)+'</td>'; } return h+'</tr></table>'; } </script> </head> <!-- ****************************** --> <body> <input type="text" id="day" readonly></input><br /> <button type="button" id="button">カレンダー表示</button> <div id="calendar"></div> </body> </html>
- babu_baboo
- ベストアンサー率51% (268/525)
No.5,6,7,10の、ごみをまきちらしている、ばぶぅ～です！ もしかすると、ふりかえきゅうじつのぶぶんがおかしいかもしれない
- babu_baboo
- ベストアンサー率51% (268/525)
＞このスクリプトは1年後、2年後でも対応しているものでしょうか？ ３ねんぐらいは、つかえるかなぁ～^^; しゅんぶんのひと、しゅうぶんのひは、２０９９ねんまでだけど おれがきめるのじゃないしなぁ～ ＞本日を起点に30日後でございました。。申し訳ないです。 かってになおしておくれ。 ＞また会社の創業記念日など突発的な休日の登録については、 ＞this.List[y + 909] = '会社創設日'; ＞などと追加すればよろしいでしょうか。 それでいいかも。 this.List[y + 112] = 'ばぶぅ～の誕生日'; をついかしてもいいじょ！ぷれぜんとも、こばまないじょ！ こんなのはむりでしょうね～？と、いわれると ちょうせんしてみたくなるのだが、 それはおすすめできないことのほうが、おおいのはなぜだろう？！
- yyr446
- ベストアンサー率65% (870/1330)
余計な解答かもしれませんが、 そもそも、プルダウンメニューに選ばせる日付をセットさせて選ばせるというやり方がいけてない。 ミニカレンダー画面を表示させてクリックした日を、検査してフォームにセットして上げるという手もあります。 ここの過去に解答にも幾つかありました。 日付入力補助カレンダーのJSプログラム http://www.kanaya440.com/contents/js/calendar/index.html http://oshiete1.goo.ne.jp/qa4470109.html とか
お礼
ご回答ありがとうございます。 ＞そもそも、プルダウンメニューに選ばせる日付をセットさせて選ばせるというやり方がいけてない。 仰る通りです。 jQueryなどを使用したカレンダー機能は存じていたのですが、先の「土日祝日」や「4営業日後から」などを考慮した機能を実装できるか不安になり、プルダウン形式でご質問とさせていただきました。 参考URL 誠にありがとうございます。 早速拝見させて頂きました。
- fujillin
- ベストアンサー率61% (1594/2576)
No4です。 回答の処理で表示開始が4営業日後ではなく、4日後以降の営業日になってましたね。すみませんでした。訂正しておきます。 window.onload = function() { //祝日の定義リスト var holiday = '[2009/7/20][2009/9/21][2009/9/22][2009/9/23][2009/10/12][2009/11/23][2009/12/23]'; var d_start = 4; //表示開始営業日 var d_end = 30; //表示終了営業日 var d=1, str, elm = document.getElementById('delidate'); var day = new Date(); while (d<=d_end) { day.setMilliseconds(24*60*60*1000); str = day.getDay(); if (0<str && str<6) { str = day.getFullYear() + '/' + (day.getMonth() + 1) + '/' + day.getDate(); if (holiday.indexOf('['+str+']')==-1 && ++d>d_start) { elm.options[d-d_start] = new Option(str, str); } } } }
お礼
ご訂正わざわざありがとうございます。
- babu_baboo
- ベストアンサー率51% (268/525)
#No5です。かんちがいしてました。するーして！ おうようできるなら、なにかにと、つかえるはず！
- babu_baboo
- ベストアンサー率51% (268/525)
だめだ～。ぐだぐだになっっちまった～！ しゅくじつも、いいかげんかぁ～ そもそも、optionのvalueのあたいを「？日後」ってのにする ひつようあるの？ふつうにすうじだけでいいじゃん！ どうせさーばがわでちぇっくするんだし・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>ひづけ</title> <select name="delidate" id="delidate"> <option value="" 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="11">11日後</option> <option value="12">12日後</option> <option value="13">13日後</option> <option value="14">14日後</option> <option value="15">15日後</option> <option value="16">16日後</option> <option value="17">17日後</option> <option value="18">18日後</option> <option value="19">19日後</option> <option value="20">20日後</option> <option value="21">21日後</option> <option value="22">22日後</option> <option value="23">23日後</option> <option value="24">24日後</option> <option value="25">25日後</option> <option value="26">26日後</option> <option value="27">27日後</option> <option value="28">28日後</option> <option value="29">29日後</option> <option value="30">30日後</option> </select> <script type="text/javascript"> //@cc_on Number.prototype.zero = function(n){ return ('0000000000'+ this).slice(-n); } Date.prototype.hizuke_JP = function(){ return this.getFullYear().zero(4)+'年'+(this.getMonth()+1).zero(2)+'月'+this.getDate().zero(2)+'日 ('+['日','月','火','水','木','金','土'][this.getDay()]+')'; } function dayCount (y, m, d){ return (y-=(m<3)*1,m+=(m<3)*12,y*365+(y/4|0)-(y/100|0)+(y/400|0)+(306*(m+1)/10|0)-428+d); } function matubi (y, m){ m--; return 30+(m<7^m&1)-(m==1)*(1+(y%4>0^y%100>0^y%400>0)); } var Holiday = function (y0, y1) { var i, y, day; this.List = { }; if (undefined === y1) y1 = y0; for (i = y0; i <= y1; i++) { y = i * 10000; this.List[y + 101] = '元旦'; this.List[y + [109,108,114,113,112,111,110][dayCount(i,1,1)%7]] = '成人の日'; this.List[y + 211] = '建国記念の日'; this.List[y + ((320.8431+0.242194*(i-1980))|0)-(((i-1980)/4)|0)] = '春分の日'; this.List[y + 429] = '昭和の日'; this.List[y + 503] = '憲法記念日'; this.List[y + 504] = 'みどりの日'; this.List[y + 505] = '子供の日'; this.List[y + [716,715,721,720,719,718,717][dayCount(i,7,1)%7]] = '海の日'; this.List[y + [916,915,921,920,919,918,917][dayCount(i,9,1)%7]] = '敬老の日'; this.List[y + ((923.2488+0.242194*(i-1980))|0)-(((i-1980)/4)|0)] = '秋分の日'; this.List[y + [1009,1008,1014,1013,1012,1011,1010][dayCount(i,10,1)%7]] = '体育の日'; this.List[y + 1103] = '文化の日'; this.List[y + 1123] = '勤労感謝の日'; this.List[y + 1223] = '天皇誕生日'; } for (day in this.List){ if (this.List[day]) { i = parseInt(day); if (this.List[day] && (dayCount(i/10000|0,((i%10000)/100|0),i%100) %7) == 0) { this.List[i+1] = '振替休日'; } } } } Holiday.prototype.get = function (y,m,d) { return this.List[y * 10000 + m * 100 + d] || null; }; var s = document.getElementById('delidate'), o, i, y, m, d, b, t; while(o = s.firstChild) s.removeChild(o); s.add(new Option('----/--/--','') /*@if(!@_jscript) */, null /*@end@*/); var now = new Date; var a = new Holiday(now.getFullYear(),now.getFullYear()+1); for (i = 4; i <= 30; i++) { now = new Date; now.setHours((i-1)*24); y = now.getFullYear(); m = now.getMonth()+1; d = now.getDate(); b = now.getDay(); h = a.get(y, m, d); if (!h && (b!=0 && b!=6)) { t = now.hizuke_JP(); s.add(new Option(t,i) /*@if(!@_jscript) */, null /*@end@*/); } } </script>
お礼
ご回答ありがとうございます。 ぐだぐだという事ですが、どこがグダグダか全く分かりませんが、 ここまで出来るんだと感服しております！
- fujillin
- ベストアンサー率61% (1594/2576)
休日のカウントは簡単にはできないのは、他の方の回答の通りです。 また、前回の回答の最後の部分を理解していただけたのかわかりませんので、念のため。 2番目のオプションから変更するようにするには for (d=0; d<26; d++) { → for (d=1; d<27; d++) { にすれば良いのだけなのですが、最低でもこれができる程度にはスクリプトの内容を理解していないと、利用するにしても、まったくアレンジが効かないのではと不安にならざるを得ません。 かなりその場しのぎ的ですが、一例として、休日リストを直接書いてしまう方法を… （とりあえず年内の祝日のみ：夏休み、正月休みは不明なので未定義） ソースを見るといかにもなので、外部スクリプトにでもしておくのかなぁ。 まともにやるなら、No2様の参考サイトのような判定関数でも用意することになるけど、夏休みとか正月休みのように各社で独自に決めている部分も多いと思うけど… でも、結局のところ、スクリプトオフの場合の対応として、受信するサーバ側でも営業日の計算処理を用意しておかなければならなくなるはずです。 （全体でどのような処理をしようとしているのかは、まるきり不明ですが） それを考えれば、やはり最初に申し上げたように、事前にサーバ側で計算をして、このセレクタのオプション部分を吐き出してあげるほうが良いのではないでしょうか？ （サーバ側の方がちゃんとした処理をしやすいし、2箇所で同じ計算させるのは、万一にも、食い違ったりする可能性がある。また、営業日データのメンテナンスの手間が2倍になったり、人為的ミスも混入しやすくなる。） というわけで、あくまでもサンプルとして、 <html> <head> <script type="text/javascript"> window.onload = function() { //祝日の定義リスト var holiday = '[2009/7/20][2009/9/21][2009/9/22][2009/9/23][2009/10/12][2009/11/23][2009/12/23]'; var d=1, str, elm = document.getElementById('delidate'); var day = new Date(); //var day=new Date(2009,8,14); day.setMilliseconds(3*24*60*60*1000); while (d<=30) { day.setMilliseconds(24*60*60*1000); str = day.getDay(); if (0<str && str<6) { str = day.getFullYear() + '/' + (day.getMonth() + 1) + '/' + day.getDate(); if (holiday.indexOf('['+str+']')==-1) elm.options[d++] = new Option(str, str); } } } </script> </head> <body> <select name="delidate" id="delidate"> <option value="default" selected>-------</option> <option value="1営業日後">1営業日後</option> <option value="2営業日後">2営業日後</option> ・・・・・・ <option value="30営業日後">30営業日後</option> </select> </body> </html>
お礼
ご回答ありがとうございます。 ＞不安にならざるを得ません。 仰る通りです。私の知識ではクリティカルな問題が発生した際に不安を覚えます。 非常に有効なスクリプトだと思ったのですが、 4営業日後の土日祝日はカウントしないつもりなので、上記だと不都合が発生してしまいます。 とても参考になりました。 ありがとうございました。
- askaaska
- ベストアンサー率35% (1455/4149)
補足よ。 通常営業日というのは データベースなんかに 営業日マスタ（休日マスタでもいいけど）を作成して 管理するものなの。 これは正月休みなど、祝祭日でも土日でもないけど 営業日ではなくなる期間や、 仕事によっては特定の時期に祝祭日・土日なんかとは 関係なく営業日ではなくなったりするためよ。 真の意味で「営業日」判定を行いたいなら こういうものを用意するべきだわ。 例えば営業日マスタに 2009/1/1～の営業日が全部書いてあるとする。 ここで2009/7/15から20営業日分取得するとすると 2009/7/15を探して（なければその直前） そこから20個分取得すればいい そういうもの。
お礼
ご回答ありがとうございます。 ＞真の意味で「営業日」判定を行いたいならこういうものを用意するべきだわ。 仰る通りマスタを用意しそこで細かな管理をするべきだと思いました。 御教授いただきまして誠にありがとうございます。
- 1
- 2
お礼
このスクリプトは1年後、2年後でも対応しているものでしょうか？ また4営業日を起点にして30日ということでしたが、間違えておりました。 本日を起点に30日後でございました。。申し訳ないです。 また会社の創業記念日など突発的な休日の登録については、 this.List[y + 909] = '会社創設日'; などと追加すればよろしいでしょうか。