javascriptカレンダーコントロール
14478 ワード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var Calendar = {
target : new Object(),
format : "yyyy-MM-dd",
curDate : new Date(),
weekArray : new Array(" "," "," "," "," "," "," "),
monthArray : new Array(" "," "," "," "," "," "," "," "," "," "," "," "),
goSelectTag : new Array(),
show : function(curYear, curMonth) {
var day2Array = this.build(curYear, curMonth);
var div = this.$("calendar_div");
if(div) {
this.hide();
document.body.removeChild(div);
}
div = document.createElement("DIV");
div.id = "calendar_div";
div.style.border = "1px solid #000";
div.style.position = "absolute";
div.style.left = this.getXY(this.target).x;
div.style.top = this.getXY(this.target).y + this.target.offsetHeight + 1;
document.body.appendChild(div);
div.style.display = "";
var tableHTML = "";
tableHTML += "<table border=\"0\" bgcolor=\"#f1f1f1\">";
tableHTML += "<tr>";
tableHTML += "<td valign=\"middle\" align='center'><input type=\"button\" name=\"prevMonth\" value=\"<\" style=\"border:none;background:transparent;height:20;width:20;FONT:16 Fixedsys\" onClick=\"Calendar.prevMonth();event.cancelBubble=true\" />";
tableHTML += " ";
tableHTML += "<select id=\"selMonth\" onChange=\"Calendar.update()\" Victor=\"Won\" onclick=\"event.cancelBubble=true\">";
for (var i=0; i<this.monthArray.length; i++)
tableHTML += "<option value=\""+ i +"\"" + (i==curMonth?" selected":"") + ">"+this.monthArray[i]+"</option>";
tableHTML += "</SELECT>";
tableHTML += " "
tableHTML += "<SELECT id=\"selYear\" onChange=\"Calendar.update()\" Victor=\"Won\" onclick=\"event.cancelBubble=true\">";
for(var i=1990;i<2015;i++)
tableHTML += "<option value=\""+i+"\"" + (i==curYear?" selected":"") + "> "+i+" </OPTION>";
tableHTML += "</select>";
tableHTML += " ";
tableHTML += "<input type=\"button\" name=\"nextMonth\" value=\">\" style=\"border:none;background:transparent;height:20;width:20;FONT:16 Fixedsys\" onclick=\"Calendar.nextMonth();event.cancelBubble=true\" />";
tableHTML += "</td>";
tableHTML += "</tr>";
tableHTML += "<tr>";
tableHTML += "<td align=\"center\">";
tableHTML += "<div style=\"background-color:'#f1f1f1';\">";
tableHTML += "<table width=\"100%\" border=\"0\">";
tableHTML += "<tr>";
for(var i=0; i<7; i++)
tableHTML += "<td bgcolor='#b9b973' align=center valign=middle><font face=Verdana style='font-size:12px;'><b>" + this.weekArray[i] + "</b></font></td>";
tableHTML += "</tr>";
var fontColor = "";
for (var i=1; i<7; i++) {
tableHTML += "<tr>";
for (var j=0; j<7; j++) {
if((j==0 || j==6)&&day2Array[i][j]>0) {
fontColor = "color:red";
} else if(day2Array[i][j]<0){
fontColor = "color:gray";
} else {
fontColor = "color:#000";
}
tableHTML += "<td bgcolor=\"#f1f1f1\" bordercolor=\"#f1f1f1\" valign=\"middle\" align=\"center\" height=\"15\" style=\"font:bold 12px Verdana;cursor:hand;"
+ fontColor + "\" onMouseOver=\"this.bgColor='#ffff00'\" onMouseOut=\"this.bgColor='#f1f1f1'\" onClick=\"Calendar.setSelected(this)\">";
tableHTML += Math.abs(day2Array[i][j]);
tableHTML += "</td>";
}
tableHTML += "</tr>";
}
tableHTML += "</table>";
tableHTML += "</div>";
tableHTML += "</td>";
tableHTML += "</tr>";
tableHTML += "<tr><td align=\"center\">";
tableHTML += "<font face=Tahoma size=2><A style=\"cursor:hand\" onMouseOver=\"this.style.color='#ffff00'\" onClick=\"self.event.cancelBubble=true;Calendar.setToday('" + this.curDate.getFullYear() + "','" + (this.curDate.getMonth()+1) + "','" + this.curDate.getDate() + "')\" onMouseOut=\"this.style.color=0\"> : "+this.monthArray[this.curDate.getMonth()]+" "+this.curDate.getDate()+", "+this.curDate.getFullYear()+"</a></font>";
tableHTML += "</td></tr>";
tableHTML += "</table>";
div.innerHTML = tableHTML;
this.toggleTags();
},
build : function(curYear,curMonth) {
var day2Array = new Array();
var iDay = 1;
var iNext = 1;
day2Array[0] = this.weekArray;
for(var i=1; i<7; i++) {
day2Array[i] = new Array();
}
var firstDayOfMonth = new Date(curYear,curMonth,1).getDay(); //
var daysInMonth = new Date(curYear,curMonth+1,0).getDate(); //
if(curMonth==11) {
daysInMonth = new Date(curYear+1,0,0).getDate();
}
var daysInLastMonth = new Date(curYear, curMonth, 0).getDate() - firstDayOfMonth + 1;
for(var i=0; i<7; i++) {
day2Array[1][i] = (i<firstDayOfMonth)? -(daysInLastMonth+i):iDay++;
}
for(var i=2; i<7; i++) {
for(var j=0; j<7; j++) {
day2Array[i][j] = (iDay<=daysInMonth)? iDay++:-(iNext++);
}
}
return day2Array;
},
prevMonth : function() {
var selYear = parseInt(this.$("selYear").value);
var selMonth = parseInt(this.$("selMonth").value)-1;
if(selMonth<0) {
selMonth = 11;
selYear = selYear-1;
}
this.show(selYear, selMonth);
},
nextMonth : function() {
var selYear = parseInt(this.$("selYear").value);
var selMonth = parseInt(this.$("selMonth").value)+1;
if(selMonth>11) {
selMonth = 0;
selYear = selYear+1;
}
this.show(selYear, selMonth);
},
update : function() {
var selYear = parseInt(this.$("selYear").value);
var selMonth = parseInt(this.$("selMonth").value);
this.show(selYear, selMonth);
},
setSelected : function(object) {
var selYear = parseInt(this.$("selYear").value);
var selMonth = parseInt(this.$("selMonth").value)+1;
var selDay = object.childNodes[0].nodeValue;
if(object.style.color == "gray") {
if(selDay>20) {
selMonth = selMonth-1;
if(selMonth<1) {
selMonth = 12;
selYear = selYear - 1;
}
} else {
selMonth = selMonth+1;
if(selMonth>12) {
selMonth = 1;
selYear = selYear + 1;
}
}
}
var selectedDay = selYear + "-" + (selMonth<10?"0"+selMonth:selMonth) + "-" + (selDay<10?"0"+selDay:selDay);
this.target.value = selectedDay;
this.hide();
},
setToday : function(selYear,selMonth,selDay) {
var selectedDay = selYear + "-" + (selMonth<10?"0"+selMonth:selMonth) + "-" + (selDay<10?"0"+selDay:selDay);
this.target.value = selectedDay;
this.hide();
},
$ : function(id) {
if(typeof(id)=="string") {
return document.getElementById(id);
} else {
return id;
}
},
getXY : function(object){
var oTmp = object;
var pt = {x:0,y:0};
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
},
toggleTags : function(){
var selects = document.getElementsByTagName("SELECT");
var Victor = "";
for(var i=0; i<selects.length; i++) {
if(document.all) {
Victor = selects[i].Victor;
} else {
Victor = selects[i].getAttribute("Victor");
}
if(Victor!="Won"&&this.tagInBound(selects[i])) {
selects[i].style.visibility = "hidden";
this.goSelectTag[this.goSelectTag.length] = selects[i];
}
}
},
tagInBound : function (object){
var calendar_div = this.$("calendar_div");
var l = parseInt(calendar_div.style.left);
var t = parseInt(calendar_div.style.top);
var r = l+parseInt(calendar_div.offsetWidth);
var b = t+parseInt(calendar_div.offsetHeight);
var ptLT = this.getXY(object);
return !((ptLT.x>r)||(ptLT.x+object.offsetWidth<l)||(ptLT.y>b)||(ptLT.y+object.offsetHeight<t));
},
hide : function() {
if(this.$("calendar_div")) {
this.$("calendar_div").style.display = "none";
}
for(var i=0; i<this.goSelectTag.length; i++) {
this.goSelectTag[i].style.visibility = "visible";
}
}
}
if(window.attachEvent) {
window.attachEvent("onload",function() {
var inputs = document.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++) {
if(inputs[i].type=="text" && inputs[i].showCalendar=="true") {
inputs[i].attachEvent("onclick",function(target){
return function() {
Calendar.target = target;
var curYear = new Date().getFullYear();
var curMonth = new Date().getMonth();
Calendar.show(curYear,curMonth);
}
}(inputs[i]))
}
}
});
document.attachEvent("onclick",function(){
var flag = false;
var srcElement = getEvent().srcElement;
do{
if((srcElement.id && srcElement.id=="calendar_div") || srcElement.showCalendar == "true") {
flag = true;
break;
}
if(srcElement.tagName == "BODY") {
break;
}
} while(srcElement = srcElement.offsetParent);
if(!flag) {
Calendar.hide();
}
});
} else if(window.addEventListener) {
window.addEventListener("load",function(){
var inputs = document.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++) {
if(inputs[i].type=="text" && inputs[i].getAttribute("showCalendar")=="true") {
inputs[i].addEventListener("click",function(target){
return function() {
Calendar.target = target;
var curYear = new Date().getFullYear();
var curMonth = new Date().getMonth();
Calendar.show(curYear,curMonth);
}
}(inputs[i]),false)
}
}
},false);
document.addEventListener("click",function(){
var flag = false;
var srcElement = getEvent().target;
do{
if((srcElement.id && srcElement.id=="calendar_div") || srcElement.getAttribute("showCalendar") == "true") {
flag = true;
break;
}
if(srcElement.tagName == "BODY") {
break;
}
} while(srcElement = srcElement.offsetParent);
if(!flag) {
Calendar.hide();
}
},false);
}
function getEvent() {
if(document.all)
return window.event;// ie
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<input type="text" showCalendar="true" format="yyyy-MM-dd" id="test" size="33" /><br/>
<select><option value="111111111"></option></select>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<select><option value="111111111"></option></select>
<input type="text" showCalendar="true" format="yyyy-MM-dd" id="aaa" size="33" /><br/>
</BODY>
</HTML>