// ======================================================== // jkl-calendar.js ---- ポップアップカレンダー表示クラス // Copyright 2005-2006 Kawasaki Yusuke // Thanks to 2tak // http://www.kawa.net/works/js/jkl/calender.html // 2005/04/06 - 最初のバージョン // 2005/04/10 - 外部スタイルシートを使用しない、JKL.Opacity はオプション // 2006/10/22 - typo修正、spliter/min_date/max_dateプロパティ、×ボタン追加 // 2006/10/23 - prototype.js併用時は、Event.observe()でイベント登録 // 2006/10/24 - max_date 範囲バグ修正 // 2006/10/25 - フォームに初期値があれば、カレンダーの初期値に採用する // 2006/11/15 - MOM Update 週の初めの曜日を変更できるように修正 // 2006/11/23 - MOM Update 今日日付の文字色を指定できるように修正、あと枠線も描画してみる // 邪魔な

邪魔なリストボックス
**********************************************************/ // 親クラス if ( typeof(JKL) == 'undefined' ) JKL = function() {}; // JKL.Calendar コンストラクタの定義 JKL.Calendar = function ( eid, fid, valname ) { this.eid = eid; this.formid = fid; this.valname = valname; this.__dispelem = null; // カレンダー表示欄エレメント this.__textelem = null; // テキスト入力欄エレメント this.__opaciobj = null; // JKL.Opacity オブジェクト this.style = new JKL.Calendar.Style(); return this; }; // バージョン番号 JKL.Calendar.VERSION = "0.13"; // デフォルトのプロパティ JKL.Calendar.prototype.spliter = "/"; JKL.Calendar.prototype.date = null; JKL.Calendar.prototype.min_date = null; JKL.Calendar.prototype.max_date = null; // 2006.11.15 MOM 表示開始曜日をプロパティに追加(デフォルトは日曜日=0) JKL.Calendar.prototype.start_day = 0; // 2006.11.23 MOM カレンダー内の日付を枠線で区切るかどうかのプロパティ(デフォルトはtrue) JKL.Calendar.prototype.draw_border = true; // JKL.Calendar.Style JKL.Calendar.Style = function() { return this; }; // デフォルトのスタイル JKL.Calendar.Style.prototype.frame_width = "150px"; // フレーム横幅 JKL.Calendar.Style.prototype.frame_color = "#006000"; // フレーム枠の色 JKL.Calendar.Style.prototype.font_size = "12px"; // 文字サイズ JKL.Calendar.Style.prototype.day_bgcolor = "#F0F0F0"; // カレンダーの背景色 JKL.Calendar.Style.prototype.month_color = "#FFFFFF"; // ○年○月部分の背景色 JKL.Calendar.Style.prototype.month_hover_color = "#009900"; // マウスオーバー時の≪≫文字色 JKL.Calendar.Style.prototype.month_hover_bgcolor= "#FFFFCC"; // マウスオーバー時の≪≫背景色 JKL.Calendar.Style.prototype.weekday_color = "#404040"; // 月曜～金曜日セルの文字色 JKL.Calendar.Style.prototype.saturday_color = "#0040D0"; // 土曜日セルの文字色 JKL.Calendar.Style.prototype.sunday_color = "#D00000"; // 日曜日セルの文字色 JKL.Calendar.Style.prototype.others_color = "#999999"; // 他の月の日セルの文字色 JKL.Calendar.Style.prototype.day_hover_bgcolor = "#FF9933"; // マウスオーバー時の日セルの背景 JKL.Calendar.Style.prototype.cursor = "pointer"; // マウスオーバー時のカーソル形状 // 2006.11.23 MOM 今日日付の文字色をプロパティに追加 JKL.Calendar.Style.prototype.today_color = "#00A000"; // 今日日付セルの文字色 // 2006.11.23 MOM 枠線もつけてみる JKL.Calendar.Style.prototype.today_border_color = "#00A000"; // 今日日付セルの枠線の色 JKL.Calendar.Style.prototype.others_border_color= "#D0D0D0"; // 他の日セルの枠線の色 // メソッド JKL.Calendar.Style.prototype.set = function(key,val) { this[key] = val; } JKL.Calendar.Style.prototype.get = function(key) { return this[key]; } JKL.Calendar.prototype.setStyle = function(key,val) { this.style.set(key,val); }; JKL.Calendar.prototype.getStyle = function(key) { return this.style.get(key); }; // 日付を初期化する JKL.Calendar.prototype.initDate = function ( dd ) { if ( ! dd ) dd = new Date(); var year = dd.getFullYear(); var mon = dd.getMonth(); var date = dd.getDate(); this.date = new Date( year, mon, date ); this.getFormValue(); return this.date; } // 透明度設定のオブジェクトを返す JKL.Calendar.prototype.getOpacityObject = function () { if ( this.__opaciobj ) return this.__opaciobj; var cal = this.getCalendarElement(); if ( ! JKL.Opacity ) return; this.__opaciobj = new JKL.Opacity( cal ); return this.__opaciobj; }; // カレンダー表示欄のエレメントを返す JKL.Calendar.prototype.getCalendarElement = function () { if ( this.__dispelem ) return this.__dispelem; this.__dispelem = document.getElementById( this.eid ) return this.__dispelem; }; // テキスト入力欄のエレメントを返す JKL.Calendar.prototype.getFormElement = function () { if ( this.__textelem ) return this.__textelem; var frmelms = document.getElementById( this.formid ); if ( ! frmelms ) return; var f = document.getElementById(this.formid); if(this.valname == 'aloha'){ var str = f.ym.options[f.ym.selectedIndex].value; var str2 = f.d.options[f.d.selectedIndex].value; }else if(this.valname == 'f_year_month_3'){ var str = f.f_year_month_3.options[f.f_year_month_3.selectedIndex].value; str = str.replace("\/",""); var str2 = f.f_day_3.options[f.f_day_3.selectedIndex].value; }else if(this.valname == 'f_year_month_4'){ var str = f.f_year_month_3.options[f.f_year_month_3.selectedIndex].value; str = str.replace("\/",""); var str2 = f.f_day_4.options[f.f_day_4.selectedIndex].value; }else if(this.valname == 'CheckInYMD'){ if ( this.__textelem ) return this.__textelem; var frmelms = document.getElementById( this.formid ); if ( ! frmelms ) return; for( var i=0; i < frmelms.elements.length; i++ ) { if ( frmelms.elements[i].name == this.valname ) { this.__textelem = frmelms.elements[i]; } } return this.__textelem; }else{ var str = f.ym.options[f.ym.selectedIndex].value; var str2 = f.d.options[f.d.selectedIndex].value; } this.__textelem = str.substr(0,4) + str.substr(4,2) + str2.substr(0,2); return this.__textelem; }; // オブジェクトに日付を記憶する（YYYY/MM/DD形式で指定する） JKL.Calendar.prototype.setDateYMD = function (ymd) { var splt = ymd.split( this.spliter ); if ( splt[0]-0 > 0 && splt[1]-0 >= 1 && splt[1]-0 <= 12 && // bug fix 2006/03/03 thanks to ucb splt[2]-0 >= 1 && splt[2]-0 <= 31 ) { if ( ! this.date ) this.initDate(); this.date.setFullYear( splt[0] ); this.date.setMonth( splt[1]-1 ); this.date.setDate( splt[2] ); } else { ymd = ""; } return ymd; }; // オブジェクトから日付を取り出す（YYYY/MM/DD形式で返る） // 引数に Date オブジェクトの指定があれば、 // オブジェクトは無視して、引数の日付を使用する（単なるfprint機能） JKL.Calendar.prototype.getDateYMD = function ( dd ) { if ( ! dd ) { if ( ! this.date ) this.initDate(); dd = this.date; } var mm = "" + (dd.getMonth()+1); var aa = "" + dd.getDate(); if ( mm.length == 1 ) mm = "" + "0" + mm; if ( aa.length == 1 ) aa = "" + "0" + aa; return dd.getFullYear() + this.spliter + mm + this.spliter + aa; }; // テキスト入力欄の値を返す（ついでにオブジェクトも更新する） JKL.Calendar.prototype.getFormValue = function () { var form1 = this.getFormElement(); if ( ! form1 ) return ""; var f = document.getElementById(this.formid); if(this.valname == 'aloha'){ var str = f.ym.options[f.ym.selectedIndex].value; var str2 = f.d.options[f.d.selectedIndex].value; }else if(this.valname == 'f_year_month_3'){ var str = f.f_year_month_3.options[f.f_year_month_3.selectedIndex].value; str = str.replace("\/",""); var str2 = f.f_day_3.options[f.f_day_3.selectedIndex].value; }else if(this.valname == 'f_year_month_4'){ var str = f.f_year_month_3.options[f.f_year_month_3.selectedIndex].value; str = str.replace("\/",""); var str2 = f.f_day_4.options[f.f_day_4.selectedIndex].value; }else if(this.valname == 'CheckInYMD'){ var form1 = this.getFormElement(); if ( ! form1 ) return ""; var date1 = this.setDateYMD( form1.value ); return date1; }else{ var str = f.ym.options[f.ym.selectedIndex].value; var str2 = f.d.options[f.d.selectedIndex].value; } var date1 = this.setDateYMD(str.substr(0,4) + "/" + str.substr(4,2) + "/" + str2.substr(0,2)); return date1; }; // フォーム入力欄に指定した値を書き込む JKL.Calendar.prototype.setFormValue = function (ymd) { if ( ! ymd ) ymd = this.getDateYMD(); // 無指定時はオブジェクトから？ var form1 = this.getFormElement(); if ( form1 ) { var yyyymmdd = ymd.replace('/',''); yyyymmdd = yyyymmdd.replace('/',''); var f = document.getElementById(this.formid); if(this.valname == 'aloha'){ for (var i=0, n=f.ym.options.length; i0; mon-- ) { this.date.setDate(1); // 毎月1日の32日後は必ず次の月 this.date.setTime( this.date.getTime() + (24*3600*1000)*32 ); } this.date.setDate(1); // 当月の1日に戻す this.write(); // 描画する }; // イベントを登録する JKL.Calendar.prototype.addEvent = function ( elem, ev, func ) { // prototype.js があれば利用する(IEメモリリーク回避) if ( window.Event && Event.observe ) { Event.observe( elem, ev, func, false ); } else { elem["on"+ev] = func; } } // カレンダーを描画する JKL.Calendar.prototype.write = function () { var date = new Date(); if ( ! this.date ) this.initDate(); date.setTime( this.date.getTime() ); var year = date.getFullYear(); // 指定年 var mon = date.getMonth(); // 指定月 var today = date.getDate(); // 指定日 var form1 = this.getFormElement(); // 選択可能な日付範囲 var min; if ( this.min_date ) { var tmp = new Date( this.min_date.getFullYear(), this.min_date.getMonth(), this.min_date.getDate() ); min = tmp.getTime(); } var max; if ( this.max_date ) { var tmp = new Date( this.max_date.getFullYear(), this.max_date.getMonth(), this.max_date.getDate() ); max = tmp.getTime(); } // 直前の月曜日まで戻す date.setDate(1); // 1日に戻す var wday = date.getDay(); // 曜日日曜(0)～土曜(6) // 2006.11.15 MOM 表示開始曜日を可変にしたので、ロジックちょっといじりますよ if ( wday != this.start_day ) { date.setTime( date.getTime() - (24*3600*1000)*((wday-this.start_day+7)%7) ); } /* if ( wday != 1 ) { if ( wday == 0 ) wday = 7; date.setTime( date.getTime() - (24*3600*1000)*(wday-1) ); } */ // 最大で7日×6週間＝42日分のループ var list = new Array(); for( var i=0; i<42; i++ ) { var tmp = new Date(); tmp.setTime( date.getTime() + (24*3600*1000)*i ); if ( i && i%7==0 && tmp.getMonth() != mon ) break; list[list.length] = tmp; } // スタイルシートを生成する var month_table_style = 'width: 100%; '; month_table_style += 'background: '+this.style.frame_color+'; '; month_table_style += 'border: 1px solid '+this.style.frame_color+';'; var week_table_style = 'width: 100%; '; week_table_style += 'background: '+this.style.day_bgcolor+'; '; week_table_style += 'border-left: 1px solid '+this.style.frame_color+'; '; week_table_style += 'border-right: 1px solid '+this.style.frame_color+'; '; var days_table_style = 'width: 100%; '; days_table_style += 'background: '+this.style.day_bgcolor+'; '; days_table_style += 'border: 1px solid '+this.style.frame_color+'; '; var month_td_style = ""; month_td_style += 'font-size: '+this.style.font_size+'; '; month_td_style += 'color: '+this.style.month_color+'; '; month_td_style += 'padding: 4px 0px 2px 0px; '; month_td_style += 'text-align: center; '; month_td_style += 'font-weight: bold;'; var week_td_style = ""; week_td_style += 'font-size: '+this.style.font_size+'; '; week_td_style += 'padding: 2px 0px 2px 0px; '; week_td_style += 'font-weight: bold;'; week_td_style += 'text-align: center;'; var days_td_style = ""; days_td_style += 'font-size: '+this.style.font_size+'; '; days_td_style += 'padding: 1px; '; days_td_style += 'text-align: center; '; days_td_style += 'font-weight: bold;'; var days_unselectable = "font-weight: normal;"; // HTMLソースを生成する var src1 = ""; // 2006.11.23 MOM 邪魔なへの応急処置その２ // カレンダーと全く同じサイズのIFRAMEを生成し、座標を一致させて下位レイヤに描画する src1 += '\n'; src1 += '

'; src1 += ''; src1 += '

\n'; // カレンダーを書き換える var cal1 = this.getCalendarElement(); if ( ! cal1 ) return; cal1.style.width = this.style.frame_width; cal1.style.position = "absolute"; cal1.innerHTML = src1; // イベントを登録する var __this = this; var get_src = function (ev) { ev = ev || window.event; var src = ev.target || ev.srcElement; return src; }; var month_onmouseover = function (ev) { var src = get_src(ev); src.style.color = __this.style.month_hover_color; src.style.background = __this.style.month_hover_bgcolor; }; var month_onmouseout = function (ev) { var src = get_src(ev); src.style.color = __this.style.month_color; src.style.background = __this.style.frame_color; }; var day_onmouseover = function (ev) { var src = get_src(ev); src.style.background = __this.style.day_hover_bgcolor; }; var day_onmouseout = function (ev) { var src = get_src(ev); src.style.background = __this.style.day_bgcolor; }; var day_onclick = function (ev) { var src = get_src(ev); var srcday = src.id.substr(src.id.length-10); __this.setFormValue( srcday ); __this.fadeOut( 1.0 ); }; // 前の月へボタン var tdprev = document.getElementById( "__"+this.eid+"_btn_prev" ); tdprev.style.cursor = this.style.cursor; this.addEvent( tdprev, "mouseover", month_onmouseover ); this.addEvent( tdprev, "mouseout", month_onmouseout ); this.addEvent( tdprev, "click", function(){ __this.moveMonth( -1 ); }); // 閉じるボタン var tdclose = document.getElementById( "__"+this.eid+"_btn_close" ); tdclose.style.cursor = this.style.cursor; this.addEvent( tdclose, "mouseover", month_onmouseover ); this.addEvent( tdclose, "mouseout", month_onmouseout ); this.addEvent( tdclose, "click", function(){ __this.hide(); }); // 次の月へボタン var tdnext = document.getElementById( "__"+this.eid+"_btn_next" ); tdnext.style.cursor = this.style.cursor; this.addEvent( tdnext, "mouseover", month_onmouseover ); this.addEvent( tdnext, "mouseout", month_onmouseout ); this.addEvent( tdnext, "click", function(){ __this.moveMonth( +1 ); }); // セルごとのイベントを登録する for ( var i=0; i utc ) continue; // 昔過ぎる if ( max && max < utc ) continue; // 未来過ぎる if ( utc == curutc ) continue; // フォーム上の当日 var ss = this.getDateYMD(dd); var cc = document.getElementById( "__"+this.eid+"_td_"+ss ); if ( ! cc ) continue; cc.style.cursor = this.style.cursor; this.addEvent( cc, "mouseover", day_onmouseover ); this.addEvent( cc, "mouseout", day_onmouseout ); this.addEvent( cc, "click", day_onclick ); } // 表示する this.show(); }; // 旧バージョン互換（typo） JKL.Calendar.prototype.getCalenderElement = JKL.Calendar.prototype.getCalendarElement; JKL.Calender = JKL.Calendar;