二種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>
|