// ======================================================== // 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 - フォームに初期値があれば、カレンダーの初期値に採用する // ======================================================== /*********************************************************** // （サンプル）ポップアップするカレンダー **********************************************************/ // 親クラス if ( typeof(JKL) == 'undefined' ) JKL = function() {}; // JKL.Calendar コンストラクタの定義 JKL.Calendar = function ( eid, fid, valname, valname2, hidden1, hidden2 ) { this.eid = eid; this.formid = fid; this.valname = valname; this.valname2 = valname2; this.hidden1 = hidden1; this.hidden2 = hidden2; this.__dispelem = null; // カレンダー表示欄エレメント this.__textelem = null; // テキスト入力欄エレメント this.__textelem2 = 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; // JKL.Calendar.Style JKL.Calendar.Style = function() { return this; }; // デフォルトのスタイル JKL.Calendar.Style.prototype.frame_width = "150px"; // フレーム横幅 // JKL.Calendar.Style.prototype.frame_color = "#009900"; // フレーム枠の色 JKL.Calendar.Style.prototype.font_size = "12px"; // 文字サイズ JKL.Calendar.Style.prototype.day_bgcolor = "#FFFFFF"; // カレンダーの背景色 JKL.Calendar.Style.prototype.month_color = "#FFFFFF"; // ○年○月部分の背景色 // JKL.Calendar.Style.prototype.month_hover_color = "#009900"; // マウスオーバー時の≪≫文字色 // JKL.Calendar.Style.prototype.month_hover_bgcolor = "#FFFFFF"; // マウスオーバー時の≪≫背景色 JKL.Calendar.Style.prototype.weekday_color = "#808080"; // 月曜～金曜日セルの文字色 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 = "#FFCC99"; // マウスオーバー時の日セルの背景 JKL.Calendar.Style.prototype.cursor = "pointer"; // マウスオーバー時のカーソル形状 // メソッド 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 ) { // 2009.02.04 var form1 = this.getFormElement(); var form2 = this.getFormElement2(); if (form1 && form2) { var splt = form1.value.split(this.spliter); var splt2 = form2.value; var year = splt[0]; var mon = splt[1]-1; var date = splt2; this.date = new Date( year, mon, date ); } else { 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; for( var i=0; i < frmelms.elements.length; i++ ) { if ( frmelms.elements[i].name == this.valname ) { this.__textelem = frmelms.elements[i]; } } return this.__textelem; }; // 2009.02.02 JKL.Calendar.prototype.getFormElement2 = function () { if ( this.__textelem2 ) return this.__textelem2; var frmelms = document.getElementById( this.formid ); if ( ! frmelms ) return; for( var i=0; i < frmelms.elements.length; i++ ) { if ( frmelms.elements[i].name == this.valname2 ) { this.__textelem2 = frmelms.elements[i]; } } return this.__textelem2; }; // オブジェクトに日付を記憶する（YYYY/MM/DD形式で指定する） JKL.Calendar.prototype.setDateYMD = function (ymd, ymd2) { var splt = ymd.split( this.spliter ); var splt2 = ymd2.split( this.spliter ); if ( splt[0]-0 > 0 && splt[1]-0 >= 1 && splt[1]-0 <= 12 && // bug fix 2006/03/03 thanks to ucb splt2[2]-0 >= 1 && splt2[2]-0 <= 31 ) { if ( ! this.date ) this.initDate(); this.date.setFullYear( splt[0] ); this.date.setMonth( splt[1]-1 ); this.date.setDate( splt2[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 form2 = this.getFormElement2(); if ( ! form2 ) return ""; var date1 = this.setDateYMD( form1.value, form2.value ); return date1; }; // 2009.02.02 // フォーム入力欄に指定した値を書き込む JKL.Calendar.prototype.setFormValue = function (ymd) { ymd = ymd.substring(0,8) + "01"; var form1 = this.getFormElement(); if ( form1 ) form1.value = ymd; }; // 2009.02.02 // フォーム入力欄に指定した値を書き込む JKL.Calendar.prototype.setFormValue2 = function (ymd) { ymd = ymd.substring(8,10); if (ymd.substring(0,1)=="0") { ymd = ymd.substring(1,2); } var form2 = this.getFormElement2(); if ( form2 ) form2.value = ymd; }; // カレンダー表示欄を表示する JKL.Calendar.prototype.show = function () { this.getCalendarElement().style.display = ""; }; // カレンダー表示欄を即座に隠す JKL.Calendar.prototype.hide = function () { this.getCalendarElement().style.display = "none"; // 2009.02.03 var hform1 = document.getElementById(this.hidden1); hform1.style.visibility = "visible"; var hform2 = document.getElementById(this.hidden2); hform2.style.visibility = "visible"; }; // カレンダー表示欄をフェードアウトする JKL.Calendar.prototype.fadeOut = function (s) { if ( JKL.Opacity ) { this.getOpacityObject().fadeOut(s); } else { this.hide(); } }; // 月単位で移動する JKL.Calendar.prototype.moveMonth = function ( mon ) { // 前へ移動 if ( ! this.date ) this.initDate(); for( ; mon<0; mon++ ) { this.date.setDate(1); // 毎月1日の1日前は必ず前の月 this.date.setTime( this.date.getTime() - (24*3600*1000) ); } // 後へ移動 for( ; mon>0; 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.isIE6 = function () { if (typeof document.body.style.maxHeight == "undefined"){ return true; } return false; } // カレンダーを描画する 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 form2 = this.getFormElement2(); // 2008.02.12 // 本日の年月を取得する today_yyyy = new Date().getFullYear(); today_mm = new Date().getMonth(); // 選択範囲を設定(当月+4) min_month_yyyy = today_yyyy; min_month_mm = today_mm; max_month_mm = today_mm + 3; if ( max_month_mm > 12 ) { max_month_mm = max_month_mm - 12; max_month_yyyy = min_month_yyyy + 1; } else { max_month_yyyy = min_month_yyyy; } max_month_mm // 2008.02.12 end // 選択可能な日付範囲 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) if ( wday != 0 ) { // if ( wday == 0 ) wday = 7; date.setTime( date.getTime() - (24*3600*1000)*(wday) ); } // 最大で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; } // スタイルシートを生成する // 2009.02.02 // 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;"; var days_unselectable = ""; var month_table_style = ''; var days_table_style = ''; var month_td_style = ''; var week_td_style = ''; var days_td_style = ''; var week_table_style = ''; // HTMLソースを生成する var src1 = ""; // 2009.02.02 src1 += '

'; src1 += '

'; // 2009.02.10 プルダウンの範囲外の時、ボタンを非表示 if ( (year > min_month_yyyy) || ((year == min_month_yyyy) && (mon > min_month_mm)) ) { src1 += '

'; } else { src1 += '

'; } src1 += ''+(mon+1)+'月'; src1 += '

'; // 2009.02.10 プルダウンの範囲外の時、ボタンを非表示 if ( (year < max_month_yyyy) || ((year == max_month_yyyy) && (mon < max_month_mm)) ) { src1 += '

'; } else { src1 += '

'; } src1 += '

'; src1 += ''; src1 += ''; src1 += ''; src1 += ''; src1 += ''; src1 += ''; src1 += ''; src1 += ''; src1 += ""; var curutc; if ( form1 && form1.value ) { var splt = form1.value.split(this.spliter); var splt2 = form2.value; if ( splt[0] > 0 && splt[2] > 0 ) { var curdd = new Date( splt[0]-0, splt[1]-1, splt2-0 ); curutc = curdd.getTime(); // フォーム上の当日 } } for ( var i=0; i utc ) || ( max && max < utc )) { cc += days_unselectable; } if ( utc == curutc ) { // フォーム上の当日 cc += "background: "+this.style.day_hover_bgcolor+";"; } var ss = this.getDateYMD(dd); var tt = dd.getDate(); src1 += ''; if ( ww == 6 ) { src1 += "\n"; // 土曜日の後に行末 } } src1 += "

日	月	火	水	木	金	土
'+tt+'

\n"; src1 += '

'; // カレンダーを書き換える var cal1 = this.getCalendarElement(); if ( ! cal1 ) return; cal1.style.width = this.style.frame_width; cal1.style.position = "absolute"; cal1.innerHTML = src1; // 2009.02.03 var hform1 = document.getElementById(this.hidden1); hform1.style.visibility = "hidden"; var hform2 = document.getElementById(this.hidden2); hform2.style.visibility = "hidden"; // イベントを登録する 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 ); // 2009.02.02 __this.setFormValue2( srcday ); __this.fadeOut( 1.0 ); }; // 前の月へボタン // 2009.02.10 プルダウンの範囲外の時、イベントを追加しない if ( (year > min_month_yyyy) || ((year == min_month_yyyy) && (mon > min_month_mm)) ) { var tdprev = document.getElementById( "__"+this.eid+"_btn_prev" ); tdprev.style.cursor = this.style.cursor; // 2009.02.12 // 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; // 2009.02.12 // this.addEvent( tdclose, "mouseover", month_onmouseover ); // this.addEvent( tdclose, "mouseout", month_onmouseout ); this.addEvent( tdclose, "click", function(){ __this.hide(); }); // 次の月へボタン // 2009.02.10 プルダウンの範囲外の時、イベントを追加しない if ( (year < max_month_yyyy) || ((year == max_month_yyyy) && (mon < max_month_mm)) ) { var tdnext = document.getElementById( "__"+this.eid+"_btn_next" ); tdnext.style.cursor = this.style.cursor; // 2009.02.12 // 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;