/* author:zheyiw
* date:23/7/2009
* version:1.1
* 使用举例: onclick="ShowCalendar('InputBoxID','outputBoxID')"
* InputBoxID是按钮控件 outputBoxID是日期输出的文本框
*/
/* 历史版本信息:
* v1 原始版本
* v1.1 添加拖动功能, 高亮显示当天,添加:加减年份
*/
//定义一块区域
document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; filter:\"progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3)\"'></div>");
//document.writeln("<div id='Calendar' style='position:absolute; z-index:1; visibility: hidden; '></div>");
//document.writeln('<iframe id="Calendar" name=wpCalendarLayer frameborder=0 onmouseout="wpCalendar.correctPosition()" style="position: absolute; width: 153; height: 208; z-index: 9998; display: none"></iframe>');
//输出数据变量
var outputData;
//确定日历位置,显示当前日期
function ShowCalendar(InputBox,outputBox)
{
outputData=document.getElementById(outputBox);
var x,y;
// var o=eval("document.all."+InputBox); // var o=eval("document.getElementById(InputBox)");
//控制控件出现的位置
var o=document.getElementById(InputBox); //传入字符串时
x=o.offsetLeft;
y=o.offsetTop;
while(o=o.offsetParent)
{
x+=o.offsetLeft;
y+=o.offsetTop;
}
document.getElementById("Calendar").style.left=x+2+"px";
document.getElementById("Calendar").style.top=y+20+"px";
document.getElementById("Calendar").style.visibility="visible"; //显示div
var objdate=new Date();
MainCalendar(objdate.getYear(),objdate.getMonth(),objdate.getDate());
}
//绘制日历
function MainCalendar(year,month,day)
{
var intLoop,intWeeks,intDays;
var DivContent="";
//插入一个表格
var objdate=new Date();
var firstDay=new Date(year, month, 1).getDay(); //得到第一天是星期几
var maxday=new Date(year, month+1, 0).getDate(); //得到当前月的天数
DivContent+="<table border='0' cellspacing='0' style='border:1px solid #0066FF; background-color:#EDF2FC'>";
var strMonthMin="monthMin("+ year +","+ month +","+ day +")";
var strMonthAdd="monthAdd("+ year +","+ month +","+ day +")";
var strYearMin="yearMin("+ year +","+ month +","+ day +")";
var strYearAdd="yearAdd("+ year +","+ month +","+ day +")";
DivContent+="<tr><td align=center ><input type='button' onclick="+ strMonthAdd +" value='<'/> </td>"
DivContent+="<td align=center ><input type='button' onclick="+ strYearMin +" value='<<'/> </td>" //年份减
DivContent+="<td align=center colspan=3>"+ year +":"+ (month+1) +"</td>"
DivContent+="<td align=center ><input type='button' onclick="+ strYearAdd +" value='>>'/> </td> " //年份加
DivContent+="<td align=center ><input type='button' onclick="+ strMonthMin +" value='>'/> </td></tr>";
DivContent+="<tr id='moveTR' style='cursor: move ' onmousedown='DragStart()' onmouseup='DragEnd()'><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td><tr>";
var d=1,dd=1;
for(var i=0;i<6;i++)
{
DivContent+="<tr>";
var strOutData="outData(this,"+ year +","+ month +")";
for(var j=1;j<8;j++)
{
if(d<=firstDay || dd>maxday) { DivContent+="<td> </td>";}
else if(dd==Number(objdate.getDate()) && month==Number(objdate.getMonth()) && year==Number(objdate.getYear())) {
DivContent+="<td bgcolor='silver' onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>";
dd++;
}
else {
DivContent+="<td onmouseover='MouseOver(this)' onmouseout='MouseOut(this)' onclick="+strOutData+">"+dd+"</td>";
dd++;
}
d++;
}
DivContent+="</tr>";
}
DivContent+="</table>";
//在区域中插入html
document.getElementById("Calendar").innerHTML=DivContent;
// newCalendar();
}
/*开始日历拖动*/
function DragStart()
{
var o =document.getElementById("Calendar");
o.onselectstart = function()
{
return(false);
};
o.onmousedown = function(e)
{
// e = e||window.event; // var x=e.layerX||e.offsetX; // var y=e.layerY||e.offsetY; // e = window.event; // var x=e.offsetX; //var y=e.offsetY;
var xx = mouseAbsolutePostion(e).x; //鼠标绝对位置
var yy = mouseAbsolutePostion(e).y; //
var ox = o.offsetLeft ;// div绝对位置
var oy = o.offsetTop;//
var x=xx-ox;
var y=yy-oy;
o.onmousemove = function(e)
{//鼠标移动时计算控件位置
e=window.event;
o.style.left=(e.clientX-x)+"px";
o.style.top=(e.clientY-y)+"px";
};
o.onmouseup=function()
{
o.onmousemove=null;
};
};
}
//关于这个拖动函数的理解:function DragStart()就是一个对象,当鼠标按下后就创建了这个对象,并且从来没有销毁。
//o.onmousedown o.onmousemove o.onmouseup三个函数被激活。
//所以在日历没有被拖动前,在其他地方是不能拖动的。
//但日历被拖动过一次后,在其他地方o.onmousedown会开始响应,重新计算坐标,作出移动动作。
function mouseAbsolutePostion(evt)
{
evt = event ? event : window.event;
return {x:evt.clientX,y:evt.clientY};
}
/*结束日历拖动*/
function DragEnd()
{
}
//月份增加
function monthAdd(year,month,day)
{
var DivContent="";
if (month==11) {month=0;year++;}
else {month++;}
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year,month,day);
}
//月份减少
function monthMin(year,month,day)
{
var DivContent="";
if (month==0) {month=11;year--;}
else {month--;}
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year,month,day);
}
//年份增加
function yearAdd(year,month,day)
{
var DivContent="";
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year+1,month,day);
}
//年份减少
function yearMin(year,month,day)
{
var DivContent="";
document.getElementById("Calendar").innerHTML=DivContent;
MainCalendar(year-1,month,day);
}
//鼠标经过
function MouseOver(obj)
{
obj.style.background="blue";
}
//鼠标离开
function MouseOut(obj)
{
obj.style.background="#EDF2FC";
}
//输出数据
function outData(obj,year,month)
{
var a=year+"-"+(month+1)+"-"+obj.innerText;
outputData.value=a;
document.getElementById("Calendar").innerHTML="";
}
分享到:
相关推荐
简单易用的javascript日历,包括一个例子。编码可以是utf-8也可以是GBK
此程序是javascript和php开发,提供酒店、门票订购的价格日历和点击日历订购产品功能。详细请参考驴妈妈 酒店和门票的价格日历。 index.html 入口文件 data.php 包含一个价格日历生成类和 一些实例 product.php ajax...
三款js日历,有很漂亮的哦!javascript 日历。很别致的
js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件
js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js...
个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件
JS 日历组件(功能很强) javascript 日历控件 日历选择空间 日期选择 强烈推荐
js日历 12种js日历 有带文本框的,有像360日历,兼容性好。 特殊声明 ,文件中有个文件 Setup.rar 是无意中上传。可以删除,360提醒是病毒,建议下载后删除。刚发现及时通报。
js超好日历表js超好日历表js超好日历表js超好日历表
基于javascript脚本的网页日历控件,格式为2013-01-01
js日历大全(收积几种JS日历),可以方便直接应用于项目中。
js日历选择代码,js实现日历选择,很实用的哦
不错的js日历特效js动态记事日历漂亮js动态记事日历漂亮
1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的JS日历控件1个很牛的...
js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar,js 日历控件 calendar
javascript日历javascript日历
3款简洁的JS日历插件,实现网页上的JavaScript日历选择功能,内含有详细的调用说明,上手容易,附带有文档。calendar1调用方法:引入script src="js/calendarDateInput.js" 在calendardateinput.js修改图片的路径。
js日历控件优化,含时分秒,年月日,很好用,,js日历控件优化,含时分秒,年月日,很好用,,js日历控件优化,含时分秒,年月日,很好用,,
js日历控件 js日历控件 js日历控件 js日历控件 js日历控件
JavaScript日历 6中样式 包括当前时间