`
zheyiw
  • 浏览: 999825 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

简单的日历控件

阅读更多
//author=zheyiw 
//date=23/7/2009 
//使用举例:  onclick="ShowCalendar(InputBox,outputBox)" 
//            InputBox是按钮控件  outputBox是日期输出的文本框 
//学习用正好,要找完整的还是WalkingPoison那个版本吧。 
//定义一块区域 
//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=outputBox; 
var x,y; 
//  var o=eval("document.all."+InputBox); 
  // var o=eval("document.getElementById(InputBox)"); 
//控制控件出现的位置 
var o=document.getElementById(InputBox); //传入字符串时 
   // var o=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"; 
     
    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 +")"; 
    DivContent+="<tr><td align=center ><input type='button' onclick="+ strMonthAdd +" value='<'/> </td>" 
    DivContent+="<td align=center colspan=5>"+ year +":"+ (month+1) +":"+ day +"</td>" 
    DivContent+="<td align=center ><input type='button' onclick="+ strMonthMin  +" value='>'/> </td></tr>"; 
    DivContent+="<tr><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())) { 
   // DivContent+="<td bgcolor='silver' onmouseover='MouseOver(this)' onmouseout='MouseOut(this)'>"+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 monthMin(year,month,day) 
{ 
var DivContent=""; 
if (month==11) {month=0;year++;} 
else {month++;} 
document.getElementById("Calendar").innerHTML=DivContent; 
MainCalendar(year,month,day); 
} 
//月份增加 
function monthAdd(year,month,day) 
{ 
var DivContent=""; 
if (month==0) {month=11;year--;} 
else {month--;} 
document.getElementById("Calendar").innerHTML=DivContent; 
MainCalendar(year,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; 
document.getElementById(outputData).value=a; 
document.getElementById("Calendar").innerHTML=""; 
} 
分享到:
评论

相关推荐

    Eson-用于WEB的简单日历控件 v1.1

    Eson简单日历控件是用于web的简单日历控件。(请在web环境中测试使用)* 不依赖于任何前端框架。* 支持单选,多选。* 自定义控件数量。* 自定义星期显示。* 自定义工作日的第一天。* 自定义日期格式。* 表单自动绑定...

    简单日历控件

    一个简单实用的日历控件

    简单好看的js日历控件

    简单好看的js日历控件

    最简单的日历控件

    最简单的日历控件,使用的是xml布局,有开始时间和结束时间,只有开始时间和结束时间的item能点击,每个item上边显示阳历,下边显示阴历,并且含有节日。

    C#实现简单日历控件

    c#实现自定义日历控件,包括日历上一些常用操作~绝对物超所值

    QML 简单日历控件

    一个qml的日历控件 很简单 没有定义很复杂的风格, 代码很简单,如果要改风格 修改spinner.qml也可以很容易做到

    js日历控件js日历控件

    js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件

    日历控件.rar 日历控件.rar

    日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件

    利用js和css创建日历控件

    使用css和javascript技术实现日历控件,可以更好的对日历的日期进行控制

    js日历控件[超酷超漂亮]

    js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js日历控件[超酷超漂亮]js...

    VBA EXCEL制作日历控件

    在EXCEL中,可以通过双击单元格,调出日历控件,通过对日历控件的操作,将所选日期更新到单元格中,该控件代码完全开放免费,供大家学习和使用,感兴趣的同学可以多多关注www.allmlp.com,让我们共同成长共同学习。

    6个JS日历控件个JS日历控件

    个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件

    日历控件 简单实用

    日历控件日历控件 简单实用

    Qt 自定义 Calendar 日历控件

    Qt 自定义 Calendar 日历 控件 方便控制 及实现样式表

    简单及使用的JS日历控件

    日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 日历控件 ...

    用JS编写的不错的日历控件源代码

    用JavaScipt编写的日历控件源代码

    很好用的日历控件,日历、控件

    很好用的日历控件,日历、控件很好用的日历控件,日历、控件很好用的日历控件,日历、控件很好用的日历控件,日历、控件

    js 简易的日历控件

    类似QQ邮箱中的简洁版日历,适合放到网页左下角或者后台管理页面的欢迎页面,简洁大方,通用版的

Global site tag (gtag.js) - Google Analytics