二种JavaScript日期控件(日期选择器)
2006年4月26日 16:33:05 发布:yaosansi
- QQ群:Y③WEB开发(DIV+CSS）号码:16610506 QQ群:Y④WEB开发(JS+AJAX）号码:16143998
- QQ群:Y⑤WEB开发(新手）号码:12777715 MSN群:yaosansi[at]126.com
- 本站大部分内容从网上收集,收集目的仅供研究、学习。涉及版权或不希望收录您的文章请您及时与我联系。
- 本站IM群，请自行选择。请各位朋友按照自己喜好加入。加入群后请及时发言，防止被清理。谢谢您的合作！！！
- QQ群:Y①WEB开发(ASP.NET）号码:7351660 QQ群:Y②WEB开发(ASP+.NET）号码:11864905
控件一:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-cn">
<TITLE></TITLE>
<script language="javascript" src="http://www.yaosansi.com/upload/month_0604/52006426163027.js" ></script>
</head>
<BODY >
  <script >
 var oCalendarEn=new PopupCalendar("oCalendarEn"); //初始化控件时,请给出实例名称如:oCalendarEn
oCalendarEn.Init();
var oCalendarChs=new PopupCalendar("oCalendarChs"); //初始化控件时,请给出实例名称:oCalendarChs
oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六");
oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
oCalendarChs.oBtnTodayTitle="今天";
oCalendarChs.oBtnCancelTitle="取消";
 oCalendarChs.Init();
</script>
<br><br><br><br>
<input readonly type="text" name="dd" id="aa" onclick="getDateString(this,oCalendarEn)" value="English Version">
<br><br><br><br>
<input readonly type="text" name="dd" id="aa" onclick="getDateString(this,oCalendarChs)" value="中文界面版">
</BODY>
</HTML>点击下载
------------------------------------------------------------------------------------------------------------------------------------------------------
控件二:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<style>
<!--
  td, input {}{ font-family: Tahoma; font-size: 8pt; color: #000080 }
-->
</style>
</head>
<!--第1部分完成对一个文本框和一个隐藏的div层的生成，已经相关的CSS等等-->
<!--↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第1部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
<!--在页面上显示一个文本输入框，放置一个onclick事件-->
<body bgcolor="#D6D3CE">
<div align="center">
<center>
<table width="248" border="0">
<tr>
<!--在这里，fPopCalendar(regdate,regdate)的两个参数实际上把整个regdate
（文本框）对象带过去了-->
<td nowrap width="599">选择时间:<input class="input" onClick="fPopCalendar(regdate,regdate);return false" type="text" name="regdate" size="12">
</td>
</tr>
</table>
</center>
</div>
<script>
//定义一些变量
var gdCtrl = new Object();
var goSelectTag = new Array();
var gcGray = "#808080";
var gcToggle = "#FB8664";
var gcBG = "#e5e6ec";
var previousObject = null;
var gdCurDate = new Date();
var giYear = gdCurDate.getFullYear();
var giMonth = gdCurDate.getMonth()+1;
var giDay = gdCurDate.getDate();
var gMonths = new Array("一月","二月","三月","四月","五月","六月","七月","八月"
,"九月","十月","十一月","十二月");
//显示一个隐藏的层，放置日期的选择框。
with (document) {
write("<Div id=VicPopCal style=POSITION:absolute;VISIBILITY:hidden;border:2px ridge;z-index:100;>");
write("<table border=0 bgcolor=#cccccc>");
write("<TR>");
write("<td valign=middle align=center><input type=button name=PrevMonth value='<' style=height:20;width:20;FONT:bold onClick=fPrevMonth()>");
write(" <Select name=tbSelYear onChange=fUpdateCal(tbSelYear.value, tbSelMonth.value) Victor=Won>");
for(i=1950;i<2015;i++)
write("<OPTION value="+i+">"+i+" 年</OPTION>");
write("</Select>");
write(" <select name=tbSelMonth onChange=fUpdateCal(tbSelYear.value, tbSelMonth.value) Victor=Won>");
for (i=0; i<12; i++)
write("<option value="+(i+1)+">"+gMonths[i]+"</option>");
write("</Select>");
write("<input type=button name=PrevMonth value='>' style=height:20;width:20;FONT:bold onclick=fNextMonth()>");
write("</td>");
write("</TR><TR>");
write("<td align=center>");
write("<DIV style=background-color:teal><table width=100% border=0>");
//fDrawCal()函数完成日期的显示。fDrawCal()函数有4个参数，第1个表示显示的年份，第2个参数表示显示的月份，第3个参数表示
//显示的格子的高度，最后一个参数应该是字体宽度，但是似乎不起作用。
fDrawCal(giYear, giMonth, 20, 12);
function fDrawCal(iYear, iMonth, iCellHeight, sDateTextSize) {
//建立WeekDay数组。
var WeekDay = new Array("日","一","二","三","四","五","六");
//建立styleTD，就是每一个TD的style。
var styleTD = " bgcolor="+gcBG+" bordercolor="+gcBG+" valign=middle align=center height="+iCellHeight+" style=font:bold arial "+sDateTextSize+";";
with (document) {
write("<tr>");
//这个for完成星期的显示。
for(i=0; i<7; i++){
write("<td "+styleTD+"color:maroon >"+ WeekDay[i] + "</td>");
 }
write("</tr>");
//在这里，每个格子（6行7列）的显示内容暂时都是空的，要由后面的fUpdateCal()函数完成。
for (w = 1; w < 7; w++) {
write("<tr>");
for (d = 0; d < 7; d++) {
write("<td id=calCell "+styleTD+"cursor:hand; onMouseOver=this.bgColor=gcToggle onMouseOut=this.bgColor=gcBG onclick=fSetSelected(this)>");
write("<font id=cellText Victor=Hcy_Flag> </font>");
write("</td>")
}
write("</tr>");
}
}
}
write("</table></DIV>");
write("</td>");
write("</TR><TR><TD align=center>");
write("<TABLE width=100%><TR><TD align=center>");
write("<B style=cursor:hand onclick=fSetDate(0,0,0) onMouseOver=this.style.color=gcToggle onMouseOut=this.style.color=0>清空</B>");
write("</td><td algin=center>");
write("<B style=cursor:hand onclick=fSetDate(giYear,giMonth,giDay) onMouseOver=this.style.color=gcToggle onMouseOut=this.style.color=0>今天: "+giYear+"-"+giMonth+"-"+giDay+"</B>");
write("</td></tr></table>");
write("</TD></TR>");
write("</TABLE></Div>");
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第1部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//第2部分的内容是4个辅助日期显示的函数。
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第2部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//fPopCalendar()函数完成日期div的显示和隐藏操作。fPopCalendar()函数有3个参数，第1个参数和第2个参数表示两个控件对象。
function fPopCalendar(popCtrl, dateCtrl){
//因为有后面的previousObject = popCtrl附值操作，所以这里可以理解成是再次点击文本框时修改调用HiddenDiv()函数取消显示。
if (popCtrl == previousObject){
if (VicPopCal.style.visibility == "visible"){
HiddenDiv();
return true;
}
}
previousObject = popCtrl;
gdCtrl = dateCtrl;
fSetYearMon(giYear, giMonth);
//调用fGetXY()函数获取控件的坐标。
var point = fGetXY(popCtrl);
with (VicPopCal.style) {
//给定显示层的绝对位置。
left = point.x;
top = point.y+popCtrl.offsetHeight;
width = VicPopCal.offsetWidth;
height = VicPopCal.offsetHeight;
//fToggleTags(point);
visibility = "visible";
}
}
//HiddenDiv()函数取消日期显示框div层的显示。
function HiddenDiv()
{
var i;
VicPopCal.style.visibility = "hidden";
}
//fUpdateCal()函数完成日期文字在页面div中的显示，fUpdateCal()有两个参数，第1个参数表示年份，第2个参数表示月份。
function fUpdateCal(iYear, iMonth) {
//fBuildCal()函数获取给定日期所有需要显示的日期内容。
myMonth = fBuildCal(iYear, iMonth);
var i = 0;
for (w = 0; w < 6; w++)
for (d = 0; d < 7; d++)
with (cellText[(7*w)+d]) {
//Victor作为一个参数，用作判断同为负值的一些日期月份的变化。
Victor = i++;
//这个if完成对日期的所有显示，同时完成所有的对日期颜色的操作。
if (myMonth[w+1][d]<0) {
color = gcGray;
innerText = -myMonth[w+1][d];
}else{
color = ((d==0)||(d==6))?"red":"black";
innerText = myMonth[w+1][d];
}
}
}
//fBuildCal()函数获取给定日期所有需要显示的日期内容。fBuildCal()函数有两个参数，第1个表示年份，第2个表示月份。
function fBuildCal(iYear, iMonth) {
//建立aMonth[1]到aMonth[6]六个空数组，最后的new Array(i)中的“i”不知道有什么作用，似乎可以去掉。
var aMonth=new Array();
for(i=1;i<7;i++)
aMonth[i]=new Array(i);
//Date对象的3个参数是必选的，表示给定的时间坐标，其中月份值比较特殊，6月份是用数字5表示的，1月份是用数字0表
//示的，所以要减去1。iDayOfFirst表示给定时间轴日期的星期值,iDaysInMonth表示所给年月的总的日期数。iOffsetLast
//表示在页面第一个格子中需要显示的上个月的日期值（在这里iYear，iMonth都是值的现在的时间）。
var dCalDate=new Date(iYear, iMonth-1, 1);
var iDayOfFirst=dCalDate.getDay();
var iDaysInMonth=new Date(iYear, iMonth, 0).getDate();
var iOffsetLast=new Date(iYear, iMonth-1, 0).getDate()-iDayOfFirst+1;
var iDate = 1;
var iNext = 1;
//这个for完成第一行的显示，作者让刚开始的几天用负数表示，便于以后的页面显示，很好的方法。
for (d = 0; d < 7; d++)
aMonth[1][d] = (d<iDayOfFirst)?-(iOffsetLast+d):iDate++;
//这个for完成2-6行的显示，依旧用负数表示下个月的日期。
for (w = 2; w < 7; w++)
for (d = 0; d < 7; d++)
aMonth[w][d] = (iDate<=iDaysInMonth)?iDate++:-(iNext++);
return aMonth;
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第2部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//事件函数。
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第3部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//fPrevMonth()函数显示上个月的日期。
function fPrevMonth(){
//tbSelMonth.value表示select中选中的月份值，tbSelYear.value表示select中选中的年份值。
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (--iMon<1) {
iMon = 12;
iYear--;
}
//调用fSetYearMon函数显示最新的月份内容。
fSetYearMon(iYear, iMon);
}
//fPrevMonth()函数显示下个月的日期。
function fNextMonth(){
//tbSelMonth.value表示select中选中的月份值，tbSelYear.value表示select中选中的年份值。
var iMon = tbSelMonth.value;
var iYear = tbSelYear.value;
if (++iMon>12) {
iMon = 1;
iYear++;
}
//调用fSetYearMon函数显示最新的月份内容。
fSetYearMon(iYear, iMon);
}
//fSetYearMon()函数可以按照给定的时间，在页面中进行日期的显示。fSetYearMon()函数有两个参数，第1个参数表示
//给定的年份，第2个参数表示给定的月份。
function fSetYearMon(iYear, iMon){
//因为6月份是用数字5表示，所以-1，选中。
tbSelMonth.options[iMon-1].selected = true;
//年份的选择有点复杂，但这似乎也是唯一的办法。
for (i = 0; i < tbSelYear.length; i++)
if (tbSelYear.options[i].value == iYear)
tbSelYear.options[i].selected = true;
//完成了上面两个select的显示之后调用fUpdateCal()函数完成页面日期的显示。
fUpdateCal(iYear, iMon);
}
//fSetDate()函数实现div层中的“清空”和“今天”的操作。
function fSetDate(iYear, iMonth, iDay){
VicPopCal.style.visibility = "hidden";
//fSetDate(0,0,0)实现清空文本框。
if ((iYear == 0) && (iMonth == 0) && (iDay == 0)){
gdCtrl.value = "";
}else{
iMonth = iMonth + 100 + "";
iMonth = iMonth.substring(1);
iDay = iDay + 100 + "";
iDay = iDay.substring(1);
if(gdCtrl.tagName == "INPUT"){
gdCtrl.value = iYear+"-"+iMonth+"-"+iDay;
}else{
gdCtrl.innerText = iYear+"-"+iMonth+"-"+iDay;
}
}
}
//fSetSelected()函数实现点击日期时的JS操作。
function fSetSelected(aCell){
var iOffset = 0;
//获取select中选中的年月份。
var iYear = parseInt(tbSelYear.value);
var iMonth = parseInt(tbSelMonth.value);
//每一个显示日期的格子都有同一个ID“cellText”，这里用children方法可以获取操作的对象，srcElement也许会更
//清晰明了一些。
with (aCell.children["cellText"]){
var iDay = parseInt(innerText);
//Victor参数的作用就在这里，如果是上个月的日期，则月份-1，如果是下个月的日期，则月份+1。
if (color==gcGray)
iOffset = (Victor<10)?-1:1;
iMonth += iOffset;
//这个if完成隔年的情况下的操作。
if (iMonth<1) {
iYear--;
iMonth = 12;
}else if (iMonth>12){
iYear++;
iMonth = 1;
}
}
//调用fSetDate()完成日期的最后显示。
fSetDate(iYear, iMonth, iDay);
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第3部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
//两个小的工具函数，获取坐标。
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 第4部分 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//Point()函数重新定位坐标。
function Point(iX, iY){
this.x = iX;
this.y = iY;
}
//fGetXY()函数获取某一给定对象的大小坐标
function fGetXY(aTag){
var oTmp = aTag;
var pt = new Point(0,0);
do {
pt.x += oTmp.offsetLeft;
pt.y += oTmp.offsetTop;
//offsetParent表示在HTML中的上一个标签的对象合集。
oTmp = oTmp.offsetParent;
} while(oTmp.tagName!="BODY");
return pt;
}
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑ 第4部分 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑
</script>
</body>
</html>
|