相当于delphi的日历控件

原创 2003年01月21日 09:06:00

file://calendar.js
<!--Start-->
var YearStr,MonthStr,DayStr,NowDayStr;
var WeekStr,week,week_one;
var WeekArr = new Array("星期日", "星期一", "星期二", "星期三","星期四", "星期五", "星期六");
var dt = new Date();
var showtype;
var caleX = 0;
var caleY = 0;

YearStr  = dt.getYear();
MonthStr = dt.getMonth() + 1;
NowDayStr = DayStr   = dt.getDate();
week     = dt.getDay();
WeekStr  = WeekArr[week];
document.write("<DIV id=idCalendar style='position:absolute;top:100px;left:100px;width:260px;border: #000000 1px solid;background-color: #ffffff;display:none'></DIV>");

function initCalendar(){
 var CaleHTML="";
 CaleHTML += "<TABLE border=0 cellspacing=0 cellpadding=1 width='100%'>";
 CaleHTML += "<TR bgcolor=#33246C><TD><BUTTON onclick='prevMonth()' class=btn><span lang=EN-US style='font-family:Arial'>&#9668;</span></BUTTON></TD>";
 CaleHTML += "<TD align=center><SPAN style='color:white'>"+ YearStr +"年"+ MonthStr +"月</SPAN></TD>"
 CaleHTML += "<TD align=right><BUTTON onclick='nextMonth()' class=btn><span lang=EN-US style='font-family:Arial'>&#9658;</span></BUTTON></TD></TR>";
 CaleHTML += "<TR><TD colspan=3>";
 CaleHTML += "<TABLE border=0 cellspacing=0 cellpadding=0 width='100%'><TR>";
 for(var i=0; i<WeekArr.length; i++){
  CaleHTML += "<TD>" + WeekArr[i] + "</TD>";
 }
 CaleHTML += "</TR><TR><TD colspan=7><HR size=1 color=blank width='90%'></TD></TR>";
 CaleHTML += bodyCalendar();
 CaleHTML += "</TABLE>";
 CaleHTML += "</TD></TR>";
 CaleHTML += "<TR><TD colspan=3>今天是:<Font color=red>"+ dt.getYear() +"-"+ (dt.getMonth() + 1) +"-"+ dt.getDate() +"</font></TD></TR>";
 CaleHTML += "</TABLE>";
 return CaleHTML;
}

function bodyCalendar(){
 var ResultStr = "<TR>";
 var tempStr = "" + MonthStr + "/1/" + YearStr;
 var d = new Date(tempStr);
 week_one = d.getDay();
 for(var i=0;i<week_one;i++){
  ResultStr += "<TD></TD>";
 }
 var bYear = YearStr/4;
 var maxDay;
 switch(MonthStr){
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
   maxDay = 31;
   break;
  case 2:
   if(bYear==0)
    maxDay = 28;
   else
    maxDay = 29;
   break;
  default:
   maxDay = 30;
   break;
 }
 var k;
 var bday;
 for(var i=0;i<maxDay;i++){

  if((i+1) == DayStr)
   bday = "border: #006432 1px solid;";
  file://else if((i+1) == NowDayStr)
   file://bday = "border: #ff0000 1px solid;";
  else
   bday = "border: #ffffff 1px solid;";

  BRStr = i+week_one+1;
  if(BRStr>=7 && BRStr%7==0){

   ResultStr += "<TD align=right style='cursor:hand;"+ bday +"' onmouseover='TDMove()' onmouseout='TDOut()' onclick='TDClick()'>"+ eval(i+1) +"</TD></TR><TR>";
   k=0;
  }
  else{
   ResultStr += "<TD align=right style='cursor:hand;"+ bday +"' onmouseover='TDMove()' onmouseout='TDOut()' onclick='TDClick()'>"+ eval(i+1) +"</TD>";
   k+=1;
  }
 }
 for(var i=0;i<7-k;i++){
  ResultStr += "<TD></TD>";
 }
 ResultStr += "</TR>";
 return ResultStr;
}

function prevMonth(){
 MonthStr -= 1;
 if(MonthStr == 0){
  MonthStr = 12;
  YearStr -= 1;
 }

 idCalendar.innerHTML = initCalendar();
}

function nextMonth(){
 MonthStr += 1;
 if(MonthStr > 12){
  MonthStr = 1;
  YearStr += 1;
 }
 idCalendar.innerHTML = initCalendar();
}


function TDMove(){
 var obj = window.event.srcElement;
 obj.style.setAttribute("border", "#005AB5 1px solid");
}

function TDOut(){
 var obj = event.srcElement;
 if(parseInt(obj.innerText) == DayStr)
  obj.style.setAttribute("border","#006432 1px solid");
 file://else if(parseInt(obj.innerText) == NowDayStr)
  file://obj.style.setAttribute("border","#ff0000 1px solid");
 else
  obj.style.setAttribute("border","#ffffff 1px solid");
}
var tobj;
function showCalendar(stype){
 showtype = stype;
 var obj  = event.srcElement;
 var pobj = obj.parentElement;
 tobj = pobj.childNodes(0);
 v = tobj.value;
 if(v != ""){
  pos = v.indexOf("-");
  if(pos != -1 && pos == 4){
   YearStr = parseInt(v.substring(0,pos));
   v = v.substring(pos+1,v.length);
  }
  pos = v.indexOf("-");
  if(pos != -1){
   MonthStr = parseInt(v.substring(0,pos));
   v = v.substring(pos+1,v.length);
  }
  if(v.length>0)
   DayStr = parseInt(v);
 }
 var objParent = obj.offsetParent;
 var left      = obj.offsetLeft;
 var top    = obj.offsetTop;
 while(objParent.tagName.toUpperCase() != "BODY"){
  left += objParent.offsetLeft;
  top  += objParent.offsetTop;
  objParent = objParent.offsetParent;
 }
 left += obj.offsetWidth;
 top  += obj.offsetHeight;

 idCalendar.style.top = top+1;
 idCalendar.style.left = left-260;
 caleX = left - 260;
 caleY = top + 1;
 idCalendar.innerHTML = initCalendar();
 idCalendar.style.display="";
 hideElement("SELECT");
 /*var left = event.clientX;
 var top  = event.clientY;
 idCalendar.style.top = top+5;
 idCalendar.style.left = left-250;
 idCalendar.innerHTML = initCalendar();
 idCalendar.style.display="";*/
}

function TDClick(){
 DayStr = event.srcElement.innerText;
 if(showtype=="day"){
  tobj.value = YearStr + "-" + MonthStr + "-" + DayStr;
 }
 else{
  tobj.value = YearStr + "-" + MonthStr;
 }
 hideCalendar();
}

function getCaleToSec(){
 var dt;
 if(showtype=="day")
  dt = new Date(MonthStr+"/"+DayStr+"/"+YearStr);
 else
  dt = new Date(MonthStr+"/1/"+YearStr);
 var s  = dt.getTime();
 return s/1000;
}

function hideCalendar(){
 idCalendar.style.display = "none";
 showElement("SELECT");
}

function C_MouseUp(){
 if(idCalendar == null)
  return;
 var top  = parseInt(idCalendar.style.top);
 var left = parseInt(idCalendar.style.left);
 var wi   = idCalendar.offsetWidth;
 var he   = idCalendar.offsetHeight;
 var x    = event.clientX;
 var y    = event.clientY;
 var x1 = left + wi;
 var y1 = top + he;

 if(x>x1||x<left||y>y1||y<top){
  hideCalendar();
  showElement("SELECT");
 }
}

function hideElement(elmID){
 for (i = 0; i < document.all.tags(elmID).length; i++){
  obj = document.all.tags(elmID)[i];
  if (! obj || ! obj.offsetParent)
   continue;

  objLeft   = obj.offsetLeft;
  objTop    = obj.offsetTop;
  objParent = obj.offsetParent;
  while (objParent.tagName.toUpperCase() != "BODY")
  {
   objLeft  += objParent.offsetLeft;
   objTop   += objParent.offsetTop;
   objParent = objParent.offsetParent;
  }

  if(caleX > (objLeft + obj.offsetWidth) || objLeft > (caleX + idCalendar.offsetWidth))
   ;
  else if(objTop > (caleY + idCalendar.offsetHeight))
   ;
  else if(caleY > (objTop + obj.offsetHeight))
   ;
  else
   obj.style.visibility = "hidden";
 }
}

function showElement(elmID){
 for (i = 0; i < document.all.tags(elmID).length; i++){
  obj = document.all.tags(elmID)[i];
  if (! obj || ! obj.offsetParent)
   continue;
  obj.style.visibility = "";
 }
}

document.onmouseup = C_MouseUp;
<!--End-->
file://TestCale.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 日历测试 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
BODY {
 BACKGROUND-COLOR: #ffffff; COLOR: #000000; FONT-FAMILY: "宋体","Arial"; FONT-SIZE: 12px; MARGIN: 0px
}
TD {
 FONT-FAMILY: "宋体", "Tahoma"; FONT-SIZE: 12px
}
.bk {
 BACKGROUND-COLOR: #f1f1f1; BORDER-BOTTOM: #eeeeee 1px solid; BORDER-LEFT: #333333 1px solid; BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: #333333 1px solid; COLOR: #0000cc; FONT-FAMILY: "宋体","Arial"
}
.btn {
 BACKGROUND-COLOR: #d6d6d6; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #eeeeee 1px solid; BORDER-RIGHT: #333333 1px solid; BORDER-TOP: #eeeeee 1px solid; COLOR: #000066; FONT-FAMILY: "宋体"; FONT-SIZE: 12px; TEXT-DECORATION: none;background-image: url(buttonface.gif);
}
</style>
<SCRIPT LANGUAGE="JavaScript" src="calendar.js"></SCRIPT>
</HEAD>

<BODY>
<p>&nbsp;</p>
<FORM METHOD=POST ACTION="">
<TABLE width="80%" align=center>
<TR>
 <TD width=150>&nbsp;</TD>
 <TD align=center>
 <INPUT TYPE="text" NAME="day" class=bk><INPUT TYPE="button" value="▼" class=btn onclick="showCalendar('day')">
 </TD>
 <TD width=150>&nbsp;</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>

继承Tcalendar控件,让当天日期醒目显示

新建控件,继承修改控件的实例。
  • lyhoo163
  • lyhoo163
  • 2016年09月16日 10:27
  • 641

在iOS上实现一个简单的日历控件

近期需要写一个交互有点DT的日历控件,具体交互细节这里略过不表。 不过再怎么复杂的控件,也是由基础的零配件组装起来的,这里最基本的就是日历控件。 先上图: 从图中可以看出日历控件就是由一...
  • jasonblog
  • jasonblog
  • 2014年03月24日 19:33
  • 64816

自定义日历控件(只是包含年和月)

因项目需要一个只显示年和月的日历,网上没有找到合适的,只有自己写了一个比较简单的,也封装的不够彻底,不过能用就行,凑合着看嘛。 中间遇到了很多小问题,并不难,只是有时半天手足无措,所以特此记录一下 ...
  • HeChunyanChen
  • HeChunyanChen
  • 2016年11月03日 18:50
  • 303

安卓自定义日历滑动的日历控件

安卓自定义日历滑动的日历控件标签(空格分隔): 安卓最近公司项目需要做这个需求,自己才疏学浅,总算能写出个大概来,遂在这里记录下来。分析先来分析一下: 首先,我们的需求是可以左右点击查看跳转到下一个...
  • free_co
  • free_co
  • 2016年12月01日 13:51
  • 700

iOS之自定义简单的日历控件

iOS并没有系统日历控件,但是说白了就是基于UICollectionView的封装,对于UICollectionView我就不说他的创建了,主要难在数据的处理,下面我就说一下处理数据的思路: 我将数...
  • qq_33623316
  • qq_33623316
  • 2017年04月10日 14:27
  • 2193

Calendar 自定义日历控件

CalendarView介绍代码地址:https://github.com/09xuanjian/CalendarView这是一个日历控件,很多时候我们需要把一些信息通过时间戳的方式展示给用户。日历是...
  • u011623470
  • u011623470
  • 2015年12月26日 20:27
  • 752

iOS控件之日历

iOS没用日历控件,所以我们需要自己进行封装,博主是用的CollectionView封装的 其实难就难在如何处理数据,下面上代码 这里是我封装的CollectionView,继承UICollectio...
  • qq_16437739
  • qq_16437739
  • 2016年02月25日 16:45
  • 3500

iOS自定义实现日历控件

SZCalendarPicker.h #import @interface SZCalendarPicker : UIView @property...
  • NickYangBooy
  • NickYangBooy
  • 2016年09月12日 12:56
  • 669

自定义javascript日历控件

Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息。所以,要编写JS日历,首先必须解决的问题是表格的行与列问题。列是固定的,七列,因为一周有七天。行需要动态计算,因为,每一个月的第一...
  • my98800
  • my98800
  • 2017年08月08日 07:45
  • 491

Android自定义控件之日历控件

Android自定义控件之日历控件三月份学习android,至今也有半年有余,中间也做过两个项目,但是依然感觉自己做的应用不是很有新意,比不上应用市场上那些应用如此绚丽。所以自己仍需继续努力。学习至今...
  • Mr_dsw
  • Mr_dsw
  • 2015年09月26日 22:21
  • 24314
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:相当于delphi的日历控件
举报原因:
原因补充:

(最多只允许输入30个字)