js日历控件收藏,备以后有用

引用

Jamesonjs日历控件收藏,备以后有用

1.=====================================第一种================================

<HTML>

<HEAD>

<META Content="Microsoft Visual Studio 6.0">

<TITLE>在网页上直接调用控件选择时间的演示效果

</TITLE>

<SCRIPT LANGUAGE=javascript>

<!--

//在www.ASPh.net上看到有网友提问:

//在ASP中通过FORM录入日期时间比较麻烦,而且还容易录入错误,

//请问有没有像VB的日期控件(我忘记名了)那样的组件,

//一点击就弹出日历菜单,这样就不会搞错了。

//小白花了点时间摸索了一下,终于实现了该功能,

//呵呵,现在拿出来和大家共享了:

//代码如下:

//测试通过:win2ks

//***************************

//先隐藏日期控件

function hide(){

showCalendar.style.display="none"

}

x=window.setTimeout ("hide()",1)

//-->

</SCRIPT>

<SCRIPT  LANGUAGE=vbscript>

<!--

'点击后显示日期控件

function button1_onclick()

showCalendar.style.display="inline"

if text1.value <> "" then

Calendar1.Value=text1.value

end if

end function

 

function Calendar1_Click()

'当选择日期后,把值显示到文本框

'以下是选择时间的格式

'text1.value =formatdatetime(Calendar1.Value,0)

text1.value =formatdatetime(Calendar1.Value,1)

'text1.value =formatdatetime(Calendar1.Value,2)

showCalendar.style.display="none"

end function

//-->

</SCRIPT>

<SCRIPT LANGUAGE=vbscript FOR=Calendar1 EVENT=Click>

<!--

Calendar1_Click()

//-->

</SCRIPT>

</HEAD>

<BODY>

<br>

<INPUT readonly style="HEIGHT: 22px; WIDTH: 177px"><INPUT type="button"

value="选择时间" button1_onclick()"> 

<P>

<div >

<OBJECT classid=clsid:8E27C92B-1264-101C-8A2F-040224009C02

VALUE="524288"><PARAM VALUE="7620"><PARAM VALUE="5080"><PARAM

NAME="_StockProps" VALUE="1"><PARAM VALUE="-2147483633"><PARAM

VALUE="2002"><PARAM VALUE="4"><PARAM VALUE="2"><PARAM

VALUE="0"><PARAM VALUE="0"><PARAM VALUE="0"><PARAM

NAME="FirstDay" VALUE="1"><PARAM VALUE="1"><PARAM

VALUE="10485760"><PARAM VALUE="-2147483632"><PARAM

VALUE="-1"><PARAM VALUE="-1"><PARAM VALUE="-1"><PARAM

NAME="ShowTitle" VALUE="-1"><PARAM VALUE="-1"><PARAM

NAME="TitleFontColor" VALUE="10485760"><PARAM VALUE="0"></OBJECT>

</div>

</BODY>

</HTML>

2.=================================第二种=======================

calender.htm

-------------------

<INPUT style="WIDTH: 80px; HEIGHT: 17px"         οnclick="CalendarWebControl.show(this,this.value);" readonly="0">

<SCRIPT type="text/javascript"></SCRIPT>

<SCRIPT language="javascript">

     var CalendarWebControl = new atCalendarControl();

</SCRIPT>

calender.js

---------------

 function atCalendarControl(){

  var calendar=this;

  this.calendarPad=null;

  this.prevMonth=null;

  this.nextMonth=null;

  this.prevYear=null;

  this.nextYear=null;

  this.goToday=null;

  this.calendarClose=null;

  this.calendarAbout=null;

  this.head=null;

  this.body=null;

  this.today=[];

  this.currentDate=[];

  this.sltDate;

  this.target;

  this.source;

  /************** 加入日历底板及阴影 *********************/

  this.addCalendarPad=function(){

   document.write("<div style=';top:100;left:0;width:255;height:167;display:none;'>");

   document.write("<iframe frameborder=0 height=168 width=255></iframe>");

   document.write("<div style=';top:4;left:4;width:248;height:164;background-color:#336699;'></div>");

   document.write("</div>");

   calendar.calendarPad=document.all.divCalendarpad;

  }

  /************** 加入日历面板 *********************/

  this.addCalendarBoard=function(){

   var BOARD=this;

   var divBoard=document.createElement("div");

   calendar.calendarPad.insertAdjacentElement("beforeEnd",divBoard);

   divBoard.style.cssText=";top:0;left:0;width:250;height:166;border:1 outset;background-color:buttonface;";

 var tbBoard=document.createElement("table");

   divBoard.insertAdjacentElement("beforeEnd",tbBoard);

   tbBoard.style.cssText=";top:0;left:0;width:100%;height:10;font-size:9pt;";

   tbBoard.cellPadding=0;

   tbBoard.cellSpacing=1;

   tbBoard.bgColor="#333333";

  /************** 设置各功能按钮的功能 *********************/

   /*********** Calendar About Button ***************/

   trRow = tbBoard.insertRow(0);

   calendar.calendarAbout=calendar.insertTbCell(trRow,0,"-","center");

   //calendar.calendarAbout.οnclick=function(){calendar.about();}

   /*********** Calendar Head ***************/

   tbCell=trRow.insertCell(1);

   tbCell.colSpan=5;

   tbCell.bgColor="#99CCFF";

   tbCell.align="center";

   tbCell.style.cssText = "cursor:default";

   calendar.head=tbCell;

   /*********** Calendar Close Button ***************/

   tbCell=trRow.insertCell(2);

   calendar.calendarClose = calendar.insertTbCell(trRow,2,"x","center");

   calendar.calendarClose.title="关闭";

   calendar.calendarClose.οnclick=function(){calendar.hide();}

   /*********** Calendar PrevYear Button ***************/

   trRow = tbBoard.insertRow(1);

   calendar.prevYear = calendar.insertTbCell(trRow,0,"&lt;&lt;","center");

   calendar.prevYear.title="上一年";

   calendar.prevYear.οnmοusedοwn=function(){

    calendar.currentDate[0]--;

    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

   }

   /*********** Calendar PrevMonth Button ***************/

   calendar.prevMonth = calendar.insertTbCell(trRow,1,"&lt;","center");

   calendar.prevMonth.title="上一月";

   calendar.prevMonth.οnmοusedοwn=function(){

 calendar.currentDate[1]--;

    if(calendar.currentDate[1]==0){

     calendar.currentDate[1]=12;

     calendar.currentDate[0]--;

    }

    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

   }

   /*********** Calendar Today Button ***************/

   calendar.goToday = calendar.insertTbCell(trRow,2,"今天","center",3);

   calendar.goToday.title="选择今天";

   calendar.goToday.οnclick=function(){

    calendar.sltDate=calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];

    calendar.target.value=calendar.sltDate;

    //calendar.sltDate = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];

    //calendar.target.value = calendar.sltDate;

    calendar.hide();

    //calendar.show(calendar.target,calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2],calendar.source);

   

   }

   /*********** Calendar NextMonth Button ***************/

   calendar.nextMonth = calendar.insertTbCell(trRow,3,"&gt;","center");

   calendar.nextMonth.title="下一月";

   calendar.nextMonth.οnmοusedοwn=function(){

    calendar.currentDate[1]++;

    if(calendar.currentDate[1]==13){

     calendar.currentDate[1]=1;

     calendar.currentDate[0]++;

    }

    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

   }

   /*********** Calendar NextYear Button ***************/

   calendar.nextYear = calendar.insertTbCell(trRow,4,"&gt;&gt;","center");

   calendar.nextYear.title="下一年";

   calendar.nextYear.οnmοusedοwn=function(){

    calendar.currentDate[0]++;

    calendar.show(calendar.target,calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+calendar.currentDate[2],calendar.source);

   

      }

   trRow = tbBoard.insertRow(2);

   var cnDateName = new Array("周日","周一","周二","周三","周四","周五","周六");

   for (var i = 0; i < 7; i++) {

    tbCell=trRow.insertCell(i)

    tbCell.innerText=cnDateName[i];

    tbCell.align="center";

    tbCell.width=35;

    tbCell.style.cssText="cursor:default;border:1 solid #99CCCC;background-color:#99CCCC;";

   }

   /*********** Calendar Body ***************/

   trRow = tbBoard.insertRow(3);

   tbCell=trRow.insertCell(0);

   tbCell.colSpan=7;

   tbCell.height=97;

   tbCell.vAlign="top";

   tbCell.bgColor="#F0F0F0";

   var tbBody=document.createElement("table");

   tbCell.insertAdjacentElement("beforeEnd",tbBody);

   tbBody.style.cssText=";top:0;left:0;width:245;height:103;font-size:9pt;"

   tbBody.cellPadding=0;

   tbBody.cellSpacing=1;

   calendar.body=tbBody;

  }

  /************** 加入功能按钮公共样式 *********************/

  this.insertTbCell=function(trRow,cellIndex,TXT,trAlign,tbColSpan){

   var tbCell=trRow.insertCell(cellIndex);

   if(tbColSpan!=undefined) tbCell.colSpan=tbColSpan;

   var btnCell=document.createElement("button");

   tbCell.insertAdjacentElement("beforeEnd",btnCell);

   btnCell.value=TXT;

   btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";

   btnCell.οnmοuseοver=function(){

    btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";

 

   }

   btnCell.οnmοuseοut=function(){

    btnCell.style.cssText="width:100%;border:1 outset;background-color:buttonface;";

   }

  // btnCell.οnmοusedοwn=function(){

  //  btnCell.style.cssText="width:100%;border:1 inset;background-color:#F0F0F0;";

  // }

   btnCell.οnmοuseup=function(){

    btnCell.style.cssText="width:100%;border:1 outset;background-color:#F0F0F0;";

   }

   btnCell.οnclick=function(){

    btnCell.blur();

   }

   return btnCell;

  }

  this.setDefaultDate=function(){

   var dftDate=new Date();

   calendar.today[0]=dftDate.getYear();

   if (dftDate.getMonth()+1 < 10){

    calendar.today[1]="0"+(dftDate.getMonth()+1);

   }

   else

   {

    calendar.today[1]=dftDate.getMonth()+1;

   }

   if(dftDate.getDate() < 10){

    calendar.today[2]="0"+dftDate.getDate();

   }

   else

   {

    calendar.today[2]=dftDate.getDate();

   }

  }

  /****************** Show Calendar *********************/

  this.show=function(targetObject,defaultDate,sourceObject){

   if(targetObject==undefined) {

    alert("未设置目标对像. /n方法: ATCALENDAR.show(obj 目标对像,string 默认日期,obj 点击对像);/n/n目标对像:接受日期返回值的对像./n默认日期:格式为/"yyyy-mm-dd/",缺省为当日日期./n点击对像:点击这个对像弹出calendar,默认为目标对像./n");

    return false;

   }

   else    calendar.target=targetObject;

   if(sourceObject==undefined) calendar.source=calendar.target;

   else calendar.source=sourceObject;

   var firstDay;

   var Cells=new Array();

 

if(defaultDate==undefined || defaultDate==""){

    var theDate=new Array();

    calendar.head.innerText = calendar.today[0]+"-"+calendar.today[1]+"-"+calendar.today[2];

    theDate[0]=calendar.today[0]; theDate[1]=calendar.today[1]; theDate[2]=calendar.today[2];

   }

   else{

    var reg=/^/d{4}-/d{1,2}-/d{2}$/

    if(!defaultDate.match(reg)){

     alert("默认日期的格式不正确/n/n默认日期可接受格式为:'yyyy-mm-dd'");

     return;

    }

    var theDate=defaultDate.split("-");

    calendar.head.innerText = defaultDate;

   }

   calendar.currentDate[0]=theDate[0];

   calendar.currentDate[1]=theDate[1];

   calendar.currentDate[2]=theDate[2];

   theFirstDay=calendar.getFirstDay(theDate[0],theDate[1]);

   theMonthLen=theFirstDay+calendar.getMonthLen(theDate[0],theDate[1]);

   //calendar.setEventKey();

   calendar.calendarPad.style.display="";

   var theRows = Math.ceil((theMonthLen)/7);

   //清除旧的日历;

   while (calendar.body.rows.length > 0) {

    calendar.body.deleteRow(0)

   }

   //建立新的日历;

   var n=0;day=0;

   for(i=0;i<theRows;i++){

    theRow=calendar.body.insertRow(i);

    for(j=0;j<7;j++){

     n++;

     if(n>theFirstDay && n<=theMonthLen){

      day=n-theFirstDay;

      calendar.insertBodyCell(theRow,j,day);

     }

  else{

      var theCell=theRow.insertCell(j);

      theCell.style.cssText="background-color:#F0F0F0;cursor:default;";

     }

    }

   }

   //****************调整日历位置**************//

   var offsetPos=calendar.getAbsolutePos(calendar.source);//计算对像的位置;

   if((document.body.offsetHeight-(offsetPos.y+calendar.source.offsetHeight-document.body.scrollTop))<calendar.calendarPad.style.pixelHeight){

    var calTop=offsetPos.y-calendar.calendarPad.style.pixelHeight;

   }

   else{

    var calTop=offsetPos.y+calendar.source.offsetHeight;

   }

   if((document.body.offsetWidth-(offsetPos.x+calendar.source.offsetWidth-document.body.scrollLeft))>calendar.calendarPad.style.pixelWidth){

    var calLeft=offsetPos.x;

   }

   else{

    var calLeft=calendar.source.offsetLeft+calendar.source.offsetWidth;

   }

   //alert(offsetPos.x);

   calendar.calendarPad.style.pixelLeft=calLeft;

   calendar.calendarPad.style.pixelTop=calTop;

  }

  /****************** 计算对像的位置 *************************/

  this.getAbsolutePos = function(el) {

   var r = { x: el.offsetLeft, y: el.offsetTop };

   if (el.offsetParent) {

    var tmp = calendar.getAbsolutePos(el.offsetParent);

    r.x += tmp.x;

    r.y += tmp.y;

   }

   return r;

  };

//************* 插入日期单元格 **************/

  this.insertBodyCell=function(theRow,j,day,targetObject){

   var theCell=theRow.insertCell(j);

   if(j==0) var theBgColor="#FF9999";

   else var theBgColor="#FFFFFF";

   if(day==calendar.currentDate[2]) var theBgColor="#CCCCCC";

   if(day==calendar.today[2]) var theBgColor="#99FFCC";

   theCell.bgColor=theBgColor;

   theCell.innerText=day;

   theCell.align="center";

   theCell.width=35;

   theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";

   theCell.οnmοuseοver=function(){

    theCell.bgColor="#FFFFCC";

    theCell.style.cssText="border:1 outset;cursor:hand;";

   }

   theCell.οnmοuseοut=function(){

    theCell.bgColor=theBgColor;

    theCell.style.cssText="border:1 solid #CCCCCC;cursor:hand;";

   }

   theCell.οnmοusedοwn=function(){

    theCell.bgColor="#FFFFCC";

    theCell.style.cssText="border:1 inset;cursor:hand;";

   }

   theCell.οnclick=function(){

    if(calendar.currentDate[1].length<2) calendar.currentDate[1]="0"+calendar.currentDate[1];

    if(day.toString().length<2) day="0"+day;

    calendar.sltDate=calendar.currentDate[0]+"-"+calendar.currentDate[1]+"-"+day;

    calendar.target.value=calendar.sltDate;

    calendar.hide();

   }

  }

  /************** 取得月份的第一天为星期几 *********************/

  this.getFirstDay=function(theYear, theMonth){

   var firstDate = new Date(theYear,theMonth-1,1);

   return firstDate.getDay();

  }

  /************** 取得月份共有几天 *********************/

 

this.getMonthLen=function(theYear, theMonth) {

   theMonth--;

   var oneDay = 1000 * 60 * 60 * 24;

   var thisMonth = new Date(theYear, theMonth, 1);

   var nextMonth = new Date(theYear, theMonth + 1, 1);

   var len = Math.ceil((nextMonth.getTime() - thisMonth.getTime())/oneDay);

   return len;

  }

  /************** 隐藏日历 *********************/

  this.hide=function(){

   //calendar.clearEventKey();

   calendar.calendarPad.style.display="none";

  }

  /************** 从这里开始 *********************/

  this.setup=function(defaultDate){

   calendar.addCalendarPad();

   calendar.addCalendarBoard();

   calendar.setDefaultDate();

  }

  /************** 关于AgetimeCalendar *********************/

  this.about=function(){

   /*//alert("Agetime Calendar V1.0/n/nwww.agetime.com/n");

   popLeft = calendar.calendarPad.style.pixelLeft+4;

   popTop = calendar.calendarPad.style.pixelTop+25;

   var popup = window.createPopup();

   var popupBody = popup.document.body;

   popupBody.style.cssText="border:solid 2 outset;font-size:9pt;background-color:#F0F0F0;";

   var popHtml = "<span style='color:#336699;font-size:12pt;'><U>关于 AgetimeCalendar</U></span><BR><BR>";

   popHtml+="版本: v1.0<BR>日期: 2004-03-13";

   popupBody.innerHTML=popHtml;

   popup.show(popLeft,popTop,240,136,document.body); */

   var strAbout = "About AgetimeCalendar/n/n";

   strAbout+="-/t: 关于/n";

   strAbout+="x/t: 隐藏/n";

   strAbout+="<</t: 上一年/n";

   strAbout+="</t: 上一月/n";

 

strAbout+="今日/t: 返回当天日期/n";

   strAbout+=">/t: 下一月/n";

   strAbout+="<</t: 下一年/n";

   strAbout+="/nAgetimeCalendar/nVersion:v1.0/nDesigned By:暂停打印 2004-03-16  afos_koo@hotmail.com /n";

   alert(strAbout);

  }

  calendar.setup();

 }

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值