dポイントプレゼントキャンペーン実施中！

selectタグで日付を生成

解決済

  • 質問者：kazuya88
  • 質問日時：
  • 回答数：13件

プルダウンメニューで、指定の日付を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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (13件中1～10件)

No.7ベストアンサー

  • 回答者： babu_baboo
  • 回答日時：

ぐだぐだだけど、よくかんがえたら、そこからはかんたん？


<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

このスクリプトは1年後、2年後でも対応しているものでしょうか？

また4営業日を起点にして30日ということでしたが、間違えておりました。
本日を起点に30日後でございました。。申し訳ないです。

また会社の創業記念日など突発的な休日の登録については、
this.List[y + 909] = '会社創設日';
などと追加すればよろしいでしょうか。

通報する
お礼日時：2009/07/17 11:41

No.13

  • 回答者： babu_baboo
  • 回答日時：

No12の


</input>
と
<br />
が、きになるじょ
    • good
    • 0
    • 件
通報する

No.12

  • 回答者： fujillin
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する

No.11

  • 回答者： babu_baboo
  • 回答日時：

No.5,6,7,10の、ごみをまきちらしている、ばぶぅ～です！


もしかすると、ふりかえきゅうじつのぶぶんがおかしいかもしれない
    • good
    • 0
    • 件
通報する

No.10

  • 回答者： babu_baboo
  • 回答日時：

＞このスクリプトは1年後、2年後でも対応しているものでしょうか？



３ねんぐらいは、つかえるかなぁ～^^;
しゅんぶんのひと、しゅうぶんのひは、２０９９ねんまでだけど
おれがきめるのじゃないしなぁ～

＞本日を起点に30日後でございました。。申し訳ないです。
かってになおしておくれ。

＞また会社の創業記念日など突発的な休日の登録については、
＞this.List[y + 909] = '会社創設日';
＞などと追加すればよろしいでしょうか。
それでいいかも。
this.List[y + 112] = 'ばぶぅ～の誕生日';
をついかしてもいいじょ！ぷれぜんとも、こばまないじょ！

こんなのはむりでしょうね～？と、いわれると
ちょうせんしてみたくなるのだが、
それはおすすめできないことのほうが、おおいのはなぜだろう？！
    • good
    • 0
    • 件
通報する

No.9

  • 回答者： yyr446
  • 回答日時：

余計な解答かもしれませんが、


そもそも、プルダウンメニューに選ばせる日付をセットさせて選ばせるというやり方がいけてない。
ミニカレンダー画面を表示させてクリックした日を、検査してフォームにセットして上げるという手もあります。
ここの過去に解答にも幾つかありました。

日付入力補助カレンダーのJSプログラム
http://www.kanaya440.com/contents/js/calendar/in …

http://oshiete1.goo.ne.jp/qa4470109.html
とか
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

＞そもそも、プルダウンメニューに選ばせる日付をセットさせて選ばせるというやり方がいけてない。
仰る通りです。
jQueryなどを使用したカレンダー機能は存じていたのですが、先の「土日祝日」や「4営業日後から」などを考慮した機能を実装できるか不安になり、プルダウン形式でご質問とさせていただきました。

参考URL 誠にありがとうございます。
早速拝見させて頂きました。

通報する
お礼日時：2009/07/17 11:46

No.8

  • 回答者： fujillin
  • 回答日時：

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);
}
}
}
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご訂正わざわざありがとうございます。

通報する
お礼日時：2009/07/17 11:42

No.6

  • 回答者： babu_baboo
  • 回答日時：

#No5です。

かんちがいしてました。するーして！
おうようできるなら、なにかにと、つかえるはず！
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： babu_baboo
  • 回答日時：

だめだ～。

ぐだぐだになっっちまった～！
しゅくじつも、いいかげんかぁ～
そもそも、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
ぐだぐだという事ですが、どこがグダグダか全く分かりませんが、
ここまで出来るんだと感服しております！

通報する
お礼日時：2009/07/17 11:35

No.4

  • 回答者： fujillin
  • 回答日時：

休日のカウントは簡単にはできないのは、他の方の回答の通りです。



また、前回の回答の最後の部分を理解していただけたのかわかりませんので、念のため。
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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
＞不安にならざるを得ません。
仰る通りです。私の知識ではクリティカルな問題が発生した際に不安を覚えます。

非常に有効なスクリプトだと思ったのですが、
4営業日後の土日祝日はカウントしないつもりなので、上記だと不都合が発生してしまいます。

とても参考になりました。
ありがとうございました。

通報する
お礼日時：2009/07/17 11:31

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報