JavaScript日期控件
2006-11-10 14:20
411 查看
1. ScriptDate.js
/**//********************************************
*
* Javascript日期對象
* 作者：limin_he(limin_he@maxnse.com)
* 日期：2006-11-02
*
********************************************/
//構造函數
function ScriptDate(sender)
...{
this.panel = sender; //存放對象的容器
this.sysDate = null; //系統日期
this.year = null; //當前年
this.month = null; //當前月
this.day = null; //當前日
this.selYear = null; //當前選擇年
this.selMonth = null; //當前選擇月
this.selDay = null; //當前選擇日
this.selDays = 1; //當前選擇的天數
this.selWeek = null; //當前選擇周
this.usabled = 1; //有效性(0為全部有效;1為從系統當前日期開始以後有效)
this.object = null; //當前對象
this.width = 200; //當前對象寬(整數)
this.title = null; //當前對象標頭
this.header = null; //當前對象頭
this.body = null; //當前對象主體
this.fontsize = "14px"; //字體大小
this.tdHeight = "24px"; //單元格高度
this.titleBGColor = "#FF6C00"; //標題背景色
this.titleColor = "#FFFFFF"; //標題字體色
this.titleHeight = "20px"; //標題高
this.titlePreYearName = "<<"; //標題上年的文字
this.titlePreMonthName = "<"; //標題上月的文字
this.titleNextYearName = ">>"; //標題下年的文字
this.titleNextMonthName = ">"; //標題下月的文字
this.headerBGColor = "#EFEFEF"; //頭背景色
this.headerHeight = "20px"; //標題高
this.headerColor = "#000000"; //頭字體色
this.headerfontsize = "12px"; //頭字體大小
this.bodyBGColor = "#ffe4cd"; //主體背景色
this.bodyColor = "#000000"; //主體字體色
this.bodyfontsize = "12px"; //主缽字體大小
this.unusableBGColor = "#ffffff"; //無效日期的背景色
this.unusabledColor = "#D6D7D9"; //無效日期的字體色
this.selectColor = "#FFFFFF"; //選擇字體色
this.selectBGColor = "#FF0000"; //選擇背景色
//代理
this.onClick = null; //單擊有效日期時執行的方法
}
//初使化
ScriptDate.prototype.Init = function()
...{
if(this.sysDate==null) this.sysDate = new Date();
if(this.year==null)
...{
this.year = this.sysDate.getFullYear();
}
if(this.selYear==null)
...{
this.selYear = this.sysDate.getFullYear();
}
if(this.month==null)
...{
this.month = this.sysDate.getMonth()+1;
}
if(this.selMonth==null)
...{
this.selMonth = this.sysDate.getMonth()+1;
}
if(this.day==null)
...{
this.day = this.sysDate.getDate();
}
if(this.selDay==null)
...{
this.selDay =this.sysDate.getDate();
}
}
//加載
ScriptDate.prototype.Load = function()
...{
this.Init();
this.Render();
}
//輸出
ScriptDate.prototype.Render = function()
...{
var div = document.createElement("div");
div.style.border = "solid 0px #000000";
div.style.width = this.width.toString() + "px";
div.style.fontSize = this.fontsize;
this.object = div;
this.CreateChildControls();
this.panel.appendChild(this.object);
}
//創建子控件
ScriptDate.prototype.CreateChildControls = function()
...{
this.object.innerHTML = "";
this.CreateTitle();
this.CreateHeader();
this.CreateBody();
}
//創建標題
ScriptDate.prototype.CreateTitle = function()
...{
var sender = this;
var tmpWidth = this.width/7;
var div = document.createElement("div");
div.style.borderLeft = "solid 1px #000000";
div.style.borderRight = "solid 1px #000000";
div.style.borderTop = "solid 1px #000000";
div.style.borderBottom = "none";
div.style.backgroundColor = this.titleBGColor;
div.style.color = this.titleColor;
div.style.height = this.titleHeight;
div.style.textAlign = "center";
div.style.verticalAlign = "middle";
this.title = div;
//div.appendChild(CreatePreYearButton());
div.appendChild(CreatePreMonthButton());
div.appendChild(CreateContent());
div.appendChild(CreateNextMonthButton());
//div.appendChild(CreateNextYearButton());
this.object.appendChild(div);
//創建內容
function CreateContent()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth*3).toString() + "px";
label.innerHTML = sender.year + "/" + sender.month;
return label;
}
//上年按鈕
function CreatePreYearButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titlePreYearName;
actrl.title = sender.titlePreYearName;
actrl.id = "preyear";
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
label.appendChild(actrl);
return label;
}
//上月按鈕
function CreatePreMonthButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
label.style.backgroundColor = "#ffe4cd";
label.style.color = "#FF6C00";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titlePreMonthName;
actrl.title = sender.titlePreMonthName;
actrl.id = "premonth";
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
label.appendChild(actrl);
return label;
}
//下月按鈕
function CreateNextMonthButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
label.style.backgroundColor = "#ffe4cd";
label.style.color = "#FF6C00";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titleNextMonthName;
actrl.title = sender.titleNextMonthName;
actrl.id = "nextmonth";
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
label.appendChild(actrl);
return label;
}
//下年按鈕
function CreateNextYearButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titleNextYearName;
actrl.title = sender.titleNextYearName;
actrl.id = "nextyear";
label.appendChild(actrl);
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
return label;
}
//跳轉日期
function GotoDate()
...{
switch(this.id)
...{
case "preyear":
sender.year = sender.year-1;
sender.CreateChildControls();
break;
case "premonth":
if(sender.month==1)
...{
sender.year = sender.year-1;
sender.month = 12
sender.CreateChildControls();
}
else
...{
sender.month = sender.month-1;
sender.CreateChildControls();
}
break;
case "nextmonth":
if(sender.month==12)
...{
sender.year = sender.year+1;
sender.month = 1
sender.CreateChildControls();
}
else
...{
sender.month = sender.month+1;
sender.CreateChildControls();
}
break;
case "nextyear":
sender.year = sender.year+1;
sender.CreateChildControls();
break;
}
}
}
//創建頭
ScriptDate.prototype.CreateHeader = function()
...{
var sender = this;
var tmpWidth = this.width/7;
var table = document.createElement("TABLE");
table.style.borderLeft = "solid 1px #000000";
table.style.borderRight = "solid 1px #000000";
table.style.borderTop = "solid 0px #000000";
table.style.borderBottom = "solid 0px #000000";
table.width = this.width.toString() + "px";
//table.border = "1px";
table.cellPadding=0;
table.cellSpacing=0;
table.rules="none";
this.header = table;
this.object.appendChild(table);
var row = table.insertRow(table.rows.length);
row.style.backgroundColor = this.headerBGColor;
CreateTD(0,"S");
CreateTD(0,"M");
CreateTD(0,"T");
CreateTD(0,"W");
CreateTD(0,"T");
CreateTD(0,"F");
CreateTD(0,"S");
function CreateTD(index,text)
...{
var cell = row.insertCell(index);
cell.align = "center";
cell.valign = "middle";
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.headerHeight;
cell.style.color = sender.headerColor;
cell.style.fontSize = sender.headerfontsize;
cell.innerHTML = text;
}
}
//創建內容
ScriptDate.prototype.CreateBody = function()
...{
var sender = this;
var tmpWidth = this.width/7;
var table = document.createElement("TABLE");
table.style.border = "solid 1px #000000";
table.border = "1px";
table.borderColor = "#000000";
table.borderColorDark="#FFFFFF";
table.style.backgroundColor = this.bodyBGColor;
table.style.fontSize = this.bodyfontsize;
table.cellPadding=0;
table.cellSpacing=0;
table.rules="all";
this.body = table;
//第幾天
var whoDay = 1;
//當前月日期
var curDate = new Date(this.year.toString() + "/" + this.month.toString() + "/" + this.day.toString());
//上一月日期
var preDate = new Date(this.year.toString() + "/" + (this.month-1).toString() + "/" + this.day.toString());
//取得當前月的第一天是星期幾
var firstDayinCurMonth = new Date(this.year.toString() + "/" + this.month.toString() + "/01");
var firstweek = firstDayinCurMonth.getDay();
//取得上個月的最大天數
var preMonthMaxDay = MaxDay(preDate);
//取得當前月的最大天數
var curMonthMaxDay = MaxDay(curDate);
//取得中間占幾行
var centerRows = 0;
if(firstweek!=0)
...{
centerRows = parseInt((curMonthMaxDay-(7-firstweek))/7);
}
else
...{
centerRows = parseInt(curMonthMaxDay/7);
}
if(firstweek!=0) CreateStartRow();
CreateCenterRow();
CreateStopRow();
this.object.appendChild(table);
//創建開始行
function CreateStartRow()
...{
var row = table.insertRow(table.rows.length);
var index = 0;
for(var i=preMonthMaxDay-firstweek+1; i<=preMonthMaxDay; i++,index++)
...{
var cell = row.insertCell(index);
cell.align = "center";
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
cell.innerHTML = i.toString();
}
for(var i=firstweek; i<7; i++,index++,whoDay++)
...{
var cell = row.insertCell(index);
cell.align = "center";
//指定當前日期是否有效
var CurTD = true;
//當前操作日期
var selDate = new Date(sender.year.toString() + "/" + sender.month.toString() + "/" + whoDay.toString());
if(sender.usabled==1)
...{
//usabled==1為從系統當前日期開始以後有效
if(selDate<ToShortDate(sender.sysDate))
...{
//系統天數>當於天 and 當前選擇月=系統月 and 當前選擇年=系統年
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
CurTD = false;
}
else
...{
cell.style.color = sender.bodyColor;
}
}
else
...{
//usabled==0為全部有效
cell.style.color = sender.bodyColor;
}
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
//設置被選中的日期
var startDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
if(sender.selWeek == null)
...{
//選中結束日期
var oldstartDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
var endDate = AddDate(4,sender.selDays,oldstartDate);
//alert(startDate + " : " + endDate);
if(selDate<endDate && selDate>=startDate)
...{
//當前操作日期<選中結束日期
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
//設置被選中的周
if(sender.selWeek != null && i==sender.selWeek && CheckTowDate(selDate,startDate)==2)
...{
if(CurTD)
...{
//有效日期內
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
cell.innerHTML = whoDay.toString();
if(CurTD)
...{
cell.value = selDate;
cell.onclick = onClick;
cell.onkeypress = onClick;
cell.onmouseover = onMouseOver;
cell.onfocus = onMouseOver;
cell.onmouseout = onMouseOut;
cell.onblur = onMouseOut;
cell.style.cursor = "pointer";
cell.title = selDate.getFullYear() +'/' + (selDate.getMonth()+1) + '/' +selDate.getDate();
}
}
}
//創建中間行
function CreateCenterRow()
...{
for(var i=0; i<centerRows; i++)
...{
var row = table.insertRow(table.rows.length);
for(var j=0; j<7; j++,whoDay++)
...{
var cell = row.insertCell(j);
cell.align = "center";
//指定當前日期是否有效
var CurTD = true;
//當前操作日期
var selDate = new Date(sender.year.toString() + "/" + sender.month.toString() + "/" + whoDay.toString());
if(sender.usabled==1)
...{
//usabled==1為從系統當前日期開始以後有效
if(selDate<ToShortDate(sender.sysDate))
...{
//系統天數>當於天 and 當前選擇月=系統月 and 當前選擇年=系統年
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
CurTD = false;
}
else
...{
cell.style.color = sender.bodyColor;
}
}
else
...{
//usabled==0為全部有效
cell.style.color = sender.bodyColor;
}
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
//設置被選中的日期
var startDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
if(sender.selWeek == null)
...{
//選中結束日期
var oldstartDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
var endDate = AddDate(4,sender.selDays,oldstartDate);
//alert(startDate + " : " + endDate + " : " + selDate);
if(selDate<endDate && selDate>=startDate)
...{
//當前操作日期<選中結束日期
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
//設置被選中的周
if(sender.selWeek != null && j==sender.selWeek && CheckTowDate(selDate,startDate)==2)
...{
if(CurTD)
...{
//有效日期內
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
cell.innerHTML = whoDay.toString();
if(CurTD)
...{
cell.value = selDate;
cell.onclick = onClick;
cell.onkeypress = onClick;
cell.onmouseover = onMouseOver;
cell.onfocus = onMouseOver;
cell.onmouseout = onMouseOut;
cell.onblur = onMouseOut;
cell.style.cursor = "pointer";
cell.title = selDate.getFullYear() +'/' + (selDate.getMonth()+1) + '/' +selDate.getDate();
}
}
}
}
//創建結束行
function CreateStopRow()
...{
var row = table.insertRow(table.rows.length);
var daylen = curMonthMaxDay-whoDay+1;
for(var i=0; i<daylen; i++,whoDay++)
...{
var cell = row.insertCell(i);
cell.align = "center";
//指定當前日期是否有效
var CurTD = true;
//當前操作日期
var selDate = new Date(sender.year.toString() + "/" + sender.month.toString() + "/" + whoDay.toString());
if(sender.usabled==1)
...{
//usabled==1為從系統當前日期開始以後有效
if(selDate<ToShortDate(sender.sysDate))
...{
//系統天數>當於天 and 當前選擇月=系統月 and 當前選擇年=系統年
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
CurTD = false;
}
else
...{
cell.style.color = sender.bodyColor;
}
}
else
...{
//usabled==0為全部有效
cell.style.color = sender.bodyColor;
}
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
//設置被選中的日期
var startDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
if(sender.selWeek == null)
...{
//選中結束日期
var oldstartDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
var endDate = AddDate(4,sender.selDays,oldstartDate);
//alert(startDate + " : " + endDate);
if(selDate<endDate && selDate>=startDate)
...{
//當前操作日期<選中結束日期
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
//設置被選中的周
if(sender.selWeek != null && i==sender.selWeek && CheckTowDate(selDate,startDate)==2)
...{
if(CurTD)
...{
//有效日期內
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
cell.innerHTML = whoDay.toString();
if(CurTD)
...{
cell.value = selDate;
cell.onclick = onClick;
cell.onkeypress = onClick;
cell.onmouseover = onMouseOver;
cell.onfocus = onMouseOver;
cell.onmouseout = onMouseOut;
cell.onblur = onMouseOut;
cell.style.cursor = "pointer";
cell.title = selDate.getFullYear() +'/' + (selDate.getMonth()+1) + '/' +selDate.getDate();
}
}
var nextday = 1;
for(var i=daylen;i<7;i++,nextday++)
...{
var cell = row.insertCell(i);
cell.align = "center";
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
cell.innerHTML = nextday.toString();
}
if(table.rows.length<6)
...{
//小於6行加一行
var row = table.insertRow(table.rows.length);
for(var i=0;i<7;i++,nextday++)
...{
var cell = row.insertCell(i);
cell.align = "center";
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
cell.innerHTML = nextday.toString();
}
}
}
//取得月份的最大天數
function MaxDay(date)
...{
var year = date.getFullYear();
var month = date.getMonth()+1;
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)
return 31;
else if(month==4 || month==6 || month==9 || month==11)
return 30;
else if(month==2)
...{
var d = new Date(year+"/2/29");
if(d.getMonth()==1) return 29;
else return 28
}
}
//比羅兩日期的年月日是否相等
function CheckTowDate(date1,date2)
...{
if(date1.getFullYear()==date2.getFullYear() && date1.getMonth()==date2.getMonth() && date1.getDate()==date2.getDate())
return 1;
else if(date1.getFullYear()==date2.getFullYear() && date1.getMonth()==date2.getMonth())
return 2;
else
return 0;
}
//日期++
function AddDate(type,lIntval,date)
...{
switch(type)
...{
case 6 ://年
date.setYear(date.getFullYear() + lIntval)
break;
case 7 : //季
date.setMonth(date.getMonth() + (lIntval * 3) )
break;
case 5 ://月
date.setMonth(date.getMonth() + lIntval)
break;
case 4 ://天
date.setDate(date.getDate() + lIntval)
break
case 3 ://時
date.setHours(date.getHours() + lIntval)
break
case 2 ://分
date.setMinutes(date.getMinutes() + lIntval)
break
case 1 ://秒
date.setSeconds(date.getSeconds() + lIntval)
break;
default:
}
return new Date(date.getFullYear() +'/' + (date.getMonth()+1) + '/' +date.getDate()+ ' '+ date.getHours()+':'+date.getMinutes()+':'+date.getSeconds());
}
//轉換為日期形式無時間
function ToShortDate(date)
...{
return new Date(date.getFullYear() +'/' + (date.getMonth()+1) + '/' +date.getDate());
}
//有效日期單擊事件
function onClick()
...{
if(sender.onClick!=null)
...{
var date = this.value;
sender.selYear = date.getFullYear();
sender.selMonth = date.getMonth()+1;
sender.selDay = date.getDate();
sender.selWeek = null;
sender.selDays = 1;
sender.CreateChildControls();
sender.onClick(sender,this.value);
}
}
//鼠標移到有效日期上的事件
function onMouseOver()
...{
this.style.color = sender.selectColor;
this.style.backgroundColor = sender.selectBGColor;
}
//鼠標從有效日期上移開的事件
function onMouseOut()
...{
if(!this.selected)
...{
this.style.color = sender.bodyColor;
this.style.backgroundColor = sender.bodyBGColor;
}
}
}
//獲得選中的日期
ScriptDate.prototype.SelectDate = function()
...{
var redate = new Array();
var table = this.body;
for(var i=0; i<table.rows.length; i++)
...{
for(var j=0; j<table.rows[i].cells.length; j++)
...{
if(table.rows[i].cells[j].selected)
...{
redate.push(table.rows[i].cells[j].value);
}
}
}
if(redate.length<this.selDays)
...{
var lastdate = redate[redate.length-1];
var maxday = this.selDays-redate.length;
for(var i=1; i<=maxday; i++)
...{
redate.push(new Date(lastdate.getFullYear().toString() + "/" + (lastdate.getMonth()+2).toString() + "/" + i.toString()));
}
}
return redate;
}
2. 調用實例
var date = new ScriptDate(document.body);
date.onClick = GetDate;
////以下是設置當前所看到的月份的星期三被選中
//date.selDays = 1;
//date.selWeek = 3;
////以下是設置從所選日期開始的向後21天被選中
//date.selWeek = null;
//date.selDays = 21;
////以下是設置指定的年月日被選中
//date.selyear = 2006;
//date.selMonth = 11;
//date.selDay = 11;
date.Load();
//單擊日期後所執行的操作
//dateCtrl為日歷對象
//date為所單擊的日期
function GetDate(dateCtrl,date)
{
alert(date);
}
//可以通過調用方法SelectDate來取得所選中的日期
var redate = date.SelectDate();
for(var i=0; i<redate.length; i++)
{
alert(redate[i]);
}
注：具體屬性設置請參考對象的構造函數
3. 效果圖如下
/**//********************************************
*
* Javascript日期對象
* 作者：limin_he(limin_he@maxnse.com)
* 日期：2006-11-02
*
********************************************/
//構造函數
function ScriptDate(sender)
...{
this.panel = sender; //存放對象的容器
this.sysDate = null; //系統日期
this.year = null; //當前年
this.month = null; //當前月
this.day = null; //當前日
this.selYear = null; //當前選擇年
this.selMonth = null; //當前選擇月
this.selDay = null; //當前選擇日
this.selDays = 1; //當前選擇的天數
this.selWeek = null; //當前選擇周
this.usabled = 1; //有效性(0為全部有效;1為從系統當前日期開始以後有效)
this.object = null; //當前對象
this.width = 200; //當前對象寬(整數)
this.title = null; //當前對象標頭
this.header = null; //當前對象頭
this.body = null; //當前對象主體
this.fontsize = "14px"; //字體大小
this.tdHeight = "24px"; //單元格高度
this.titleBGColor = "#FF6C00"; //標題背景色
this.titleColor = "#FFFFFF"; //標題字體色
this.titleHeight = "20px"; //標題高
this.titlePreYearName = "<<"; //標題上年的文字
this.titlePreMonthName = "<"; //標題上月的文字
this.titleNextYearName = ">>"; //標題下年的文字
this.titleNextMonthName = ">"; //標題下月的文字
this.headerBGColor = "#EFEFEF"; //頭背景色
this.headerHeight = "20px"; //標題高
this.headerColor = "#000000"; //頭字體色
this.headerfontsize = "12px"; //頭字體大小
this.bodyBGColor = "#ffe4cd"; //主體背景色
this.bodyColor = "#000000"; //主體字體色
this.bodyfontsize = "12px"; //主缽字體大小
this.unusableBGColor = "#ffffff"; //無效日期的背景色
this.unusabledColor = "#D6D7D9"; //無效日期的字體色
this.selectColor = "#FFFFFF"; //選擇字體色
this.selectBGColor = "#FF0000"; //選擇背景色
//代理
this.onClick = null; //單擊有效日期時執行的方法
}
//初使化
ScriptDate.prototype.Init = function()
...{
if(this.sysDate==null) this.sysDate = new Date();
if(this.year==null)
...{
this.year = this.sysDate.getFullYear();
}
if(this.selYear==null)
...{
this.selYear = this.sysDate.getFullYear();
}
if(this.month==null)
...{
this.month = this.sysDate.getMonth()+1;
}
if(this.selMonth==null)
...{
this.selMonth = this.sysDate.getMonth()+1;
}
if(this.day==null)
...{
this.day = this.sysDate.getDate();
}
if(this.selDay==null)
...{
this.selDay =this.sysDate.getDate();
}
}
//加載
ScriptDate.prototype.Load = function()
...{
this.Init();
this.Render();
}
//輸出
ScriptDate.prototype.Render = function()
...{
var div = document.createElement("div");
div.style.border = "solid 0px #000000";
div.style.width = this.width.toString() + "px";
div.style.fontSize = this.fontsize;
this.object = div;
this.CreateChildControls();
this.panel.appendChild(this.object);
}
//創建子控件
ScriptDate.prototype.CreateChildControls = function()
...{
this.object.innerHTML = "";
this.CreateTitle();
this.CreateHeader();
this.CreateBody();
}
//創建標題
ScriptDate.prototype.CreateTitle = function()
...{
var sender = this;
var tmpWidth = this.width/7;
var div = document.createElement("div");
div.style.borderLeft = "solid 1px #000000";
div.style.borderRight = "solid 1px #000000";
div.style.borderTop = "solid 1px #000000";
div.style.borderBottom = "none";
div.style.backgroundColor = this.titleBGColor;
div.style.color = this.titleColor;
div.style.height = this.titleHeight;
div.style.textAlign = "center";
div.style.verticalAlign = "middle";
this.title = div;
//div.appendChild(CreatePreYearButton());
div.appendChild(CreatePreMonthButton());
div.appendChild(CreateContent());
div.appendChild(CreateNextMonthButton());
//div.appendChild(CreateNextYearButton());
this.object.appendChild(div);
//創建內容
function CreateContent()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth*3).toString() + "px";
label.innerHTML = sender.year + "/" + sender.month;
return label;
}
//上年按鈕
function CreatePreYearButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titlePreYearName;
actrl.title = sender.titlePreYearName;
actrl.id = "preyear";
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
label.appendChild(actrl);
return label;
}
//上月按鈕
function CreatePreMonthButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
label.style.backgroundColor = "#ffe4cd";
label.style.color = "#FF6C00";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titlePreMonthName;
actrl.title = sender.titlePreMonthName;
actrl.id = "premonth";
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
label.appendChild(actrl);
return label;
}
//下月按鈕
function CreateNextMonthButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
label.style.backgroundColor = "#ffe4cd";
label.style.color = "#FF6C00";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titleNextMonthName;
actrl.title = sender.titleNextMonthName;
actrl.id = "nextmonth";
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
label.appendChild(actrl);
return label;
}
//下年按鈕
function CreateNextYearButton()
...{
var label = document.createElement("span");
label.style.width = (tmpWidth-1).toString() + "px";
var actrl = document.createElement("A");
actrl.href="#";
actrl.innerHTML = sender.titleNextYearName;
actrl.title = sender.titleNextYearName;
actrl.id = "nextyear";
label.appendChild(actrl);
actrl.onclick = GotoDate;
actrl.onkeypress = GotoDate;
return label;
}
//跳轉日期
function GotoDate()
...{
switch(this.id)
...{
case "preyear":
sender.year = sender.year-1;
sender.CreateChildControls();
break;
case "premonth":
if(sender.month==1)
...{
sender.year = sender.year-1;
sender.month = 12
sender.CreateChildControls();
}
else
...{
sender.month = sender.month-1;
sender.CreateChildControls();
}
break;
case "nextmonth":
if(sender.month==12)
...{
sender.year = sender.year+1;
sender.month = 1
sender.CreateChildControls();
}
else
...{
sender.month = sender.month+1;
sender.CreateChildControls();
}
break;
case "nextyear":
sender.year = sender.year+1;
sender.CreateChildControls();
break;
}
}
}
//創建頭
ScriptDate.prototype.CreateHeader = function()
...{
var sender = this;
var tmpWidth = this.width/7;
var table = document.createElement("TABLE");
table.style.borderLeft = "solid 1px #000000";
table.style.borderRight = "solid 1px #000000";
table.style.borderTop = "solid 0px #000000";
table.style.borderBottom = "solid 0px #000000";
table.width = this.width.toString() + "px";
//table.border = "1px";
table.cellPadding=0;
table.cellSpacing=0;
table.rules="none";
this.header = table;
this.object.appendChild(table);
var row = table.insertRow(table.rows.length);
row.style.backgroundColor = this.headerBGColor;
CreateTD(0,"S");
CreateTD(0,"M");
CreateTD(0,"T");
CreateTD(0,"W");
CreateTD(0,"T");
CreateTD(0,"F");
CreateTD(0,"S");
function CreateTD(index,text)
...{
var cell = row.insertCell(index);
cell.align = "center";
cell.valign = "middle";
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.headerHeight;
cell.style.color = sender.headerColor;
cell.style.fontSize = sender.headerfontsize;
cell.innerHTML = text;
}
}
//創建內容
ScriptDate.prototype.CreateBody = function()
...{
var sender = this;
var tmpWidth = this.width/7;
var table = document.createElement("TABLE");
table.style.border = "solid 1px #000000";
table.border = "1px";
table.borderColor = "#000000";
table.borderColorDark="#FFFFFF";
table.style.backgroundColor = this.bodyBGColor;
table.style.fontSize = this.bodyfontsize;
table.cellPadding=0;
table.cellSpacing=0;
table.rules="all";
this.body = table;
//第幾天
var whoDay = 1;
//當前月日期
var curDate = new Date(this.year.toString() + "/" + this.month.toString() + "/" + this.day.toString());
//上一月日期
var preDate = new Date(this.year.toString() + "/" + (this.month-1).toString() + "/" + this.day.toString());
//取得當前月的第一天是星期幾
var firstDayinCurMonth = new Date(this.year.toString() + "/" + this.month.toString() + "/01");
var firstweek = firstDayinCurMonth.getDay();
//取得上個月的最大天數
var preMonthMaxDay = MaxDay(preDate);
//取得當前月的最大天數
var curMonthMaxDay = MaxDay(curDate);
//取得中間占幾行
var centerRows = 0;
if(firstweek!=0)
...{
centerRows = parseInt((curMonthMaxDay-(7-firstweek))/7);
}
else
...{
centerRows = parseInt(curMonthMaxDay/7);
}
if(firstweek!=0) CreateStartRow();
CreateCenterRow();
CreateStopRow();
this.object.appendChild(table);
//創建開始行
function CreateStartRow()
...{
var row = table.insertRow(table.rows.length);
var index = 0;
for(var i=preMonthMaxDay-firstweek+1; i<=preMonthMaxDay; i++,index++)
...{
var cell = row.insertCell(index);
cell.align = "center";
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
cell.innerHTML = i.toString();
}
for(var i=firstweek; i<7; i++,index++,whoDay++)
...{
var cell = row.insertCell(index);
cell.align = "center";
//指定當前日期是否有效
var CurTD = true;
//當前操作日期
var selDate = new Date(sender.year.toString() + "/" + sender.month.toString() + "/" + whoDay.toString());
if(sender.usabled==1)
...{
//usabled==1為從系統當前日期開始以後有效
if(selDate<ToShortDate(sender.sysDate))
...{
//系統天數>當於天 and 當前選擇月=系統月 and 當前選擇年=系統年
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
CurTD = false;
}
else
...{
cell.style.color = sender.bodyColor;
}
}
else
...{
//usabled==0為全部有效
cell.style.color = sender.bodyColor;
}
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
//設置被選中的日期
var startDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
if(sender.selWeek == null)
...{
//選中結束日期
var oldstartDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
var endDate = AddDate(4,sender.selDays,oldstartDate);
//alert(startDate + " : " + endDate);
if(selDate<endDate && selDate>=startDate)
...{
//當前操作日期<選中結束日期
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
//設置被選中的周
if(sender.selWeek != null && i==sender.selWeek && CheckTowDate(selDate,startDate)==2)
...{
if(CurTD)
...{
//有效日期內
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
cell.innerHTML = whoDay.toString();
if(CurTD)
...{
cell.value = selDate;
cell.onclick = onClick;
cell.onkeypress = onClick;
cell.onmouseover = onMouseOver;
cell.onfocus = onMouseOver;
cell.onmouseout = onMouseOut;
cell.onblur = onMouseOut;
cell.style.cursor = "pointer";
cell.title = selDate.getFullYear() +'/' + (selDate.getMonth()+1) + '/' +selDate.getDate();
}
}
}
//創建中間行
function CreateCenterRow()
...{
for(var i=0; i<centerRows; i++)
...{
var row = table.insertRow(table.rows.length);
for(var j=0; j<7; j++,whoDay++)
...{
var cell = row.insertCell(j);
cell.align = "center";
//指定當前日期是否有效
var CurTD = true;
//當前操作日期
var selDate = new Date(sender.year.toString() + "/" + sender.month.toString() + "/" + whoDay.toString());
if(sender.usabled==1)
...{
//usabled==1為從系統當前日期開始以後有效
if(selDate<ToShortDate(sender.sysDate))
...{
//系統天數>當於天 and 當前選擇月=系統月 and 當前選擇年=系統年
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
CurTD = false;
}
else
...{
cell.style.color = sender.bodyColor;
}
}
else
...{
//usabled==0為全部有效
cell.style.color = sender.bodyColor;
}
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
//設置被選中的日期
var startDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
if(sender.selWeek == null)
...{
//選中結束日期
var oldstartDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
var endDate = AddDate(4,sender.selDays,oldstartDate);
//alert(startDate + " : " + endDate + " : " + selDate);
if(selDate<endDate && selDate>=startDate)
...{
//當前操作日期<選中結束日期
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
//設置被選中的周
if(sender.selWeek != null && j==sender.selWeek && CheckTowDate(selDate,startDate)==2)
...{
if(CurTD)
...{
//有效日期內
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
cell.innerHTML = whoDay.toString();
if(CurTD)
...{
cell.value = selDate;
cell.onclick = onClick;
cell.onkeypress = onClick;
cell.onmouseover = onMouseOver;
cell.onfocus = onMouseOver;
cell.onmouseout = onMouseOut;
cell.onblur = onMouseOut;
cell.style.cursor = "pointer";
cell.title = selDate.getFullYear() +'/' + (selDate.getMonth()+1) + '/' +selDate.getDate();
}
}
}
}
//創建結束行
function CreateStopRow()
...{
var row = table.insertRow(table.rows.length);
var daylen = curMonthMaxDay-whoDay+1;
for(var i=0; i<daylen; i++,whoDay++)
...{
var cell = row.insertCell(i);
cell.align = "center";
//指定當前日期是否有效
var CurTD = true;
//當前操作日期
var selDate = new Date(sender.year.toString() + "/" + sender.month.toString() + "/" + whoDay.toString());
if(sender.usabled==1)
...{
//usabled==1為從系統當前日期開始以後有效
if(selDate<ToShortDate(sender.sysDate))
...{
//系統天數>當於天 and 當前選擇月=系統月 and 當前選擇年=系統年
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
CurTD = false;
}
else
...{
cell.style.color = sender.bodyColor;
}
}
else
...{
//usabled==0為全部有效
cell.style.color = sender.bodyColor;
}
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
//設置被選中的日期
var startDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
if(sender.selWeek == null)
...{
//選中結束日期
var oldstartDate = new Date(sender.selYear.toString() + "/" + sender.selMonth.toString() + "/" + sender.selDay.toString());
var endDate = AddDate(4,sender.selDays,oldstartDate);
//alert(startDate + " : " + endDate);
if(selDate<endDate && selDate>=startDate)
...{
//當前操作日期<選中結束日期
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
//設置被選中的周
if(sender.selWeek != null && i==sender.selWeek && CheckTowDate(selDate,startDate)==2)
...{
if(CurTD)
...{
//有效日期內
cell.style.color = sender.selectColor;
cell.style.backgroundColor = sender.selectBGColor;
cell.selected = true;
}
}
cell.innerHTML = whoDay.toString();
if(CurTD)
...{
cell.value = selDate;
cell.onclick = onClick;
cell.onkeypress = onClick;
cell.onmouseover = onMouseOver;
cell.onfocus = onMouseOver;
cell.onmouseout = onMouseOut;
cell.onblur = onMouseOut;
cell.style.cursor = "pointer";
cell.title = selDate.getFullYear() +'/' + (selDate.getMonth()+1) + '/' +selDate.getDate();
}
}
var nextday = 1;
for(var i=daylen;i<7;i++,nextday++)
...{
var cell = row.insertCell(i);
cell.align = "center";
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
cell.innerHTML = nextday.toString();
}
if(table.rows.length<6)
...{
//小於6行加一行
var row = table.insertRow(table.rows.length);
for(var i=0;i<7;i++,nextday++)
...{
var cell = row.insertCell(i);
cell.align = "center";
cell.style.color = sender.unusabledColor;
cell.style.backgroundColor = sender.unusableBGColor;
cell.style.width = tmpWidth.toString() + "px";
cell.style.height = sender.tdHeight;
cell.innerHTML = nextday.toString();
}
}
}
//取得月份的最大天數
function MaxDay(date)
...{
var year = date.getFullYear();
var month = date.getMonth()+1;
if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12)
return 31;
else if(month==4 || month==6 || month==9 || month==11)
return 30;
else if(month==2)
...{
var d = new Date(year+"/2/29");
if(d.getMonth()==1) return 29;
else return 28
}
}
//比羅兩日期的年月日是否相等
function CheckTowDate(date1,date2)
...{
if(date1.getFullYear()==date2.getFullYear() && date1.getMonth()==date2.getMonth() && date1.getDate()==date2.getDate())
return 1;
else if(date1.getFullYear()==date2.getFullYear() && date1.getMonth()==date2.getMonth())
return 2;
else
return 0;
}
//日期++
function AddDate(type,lIntval,date)
...{
switch(type)
...{
case 6 ://年
date.setYear(date.getFullYear() + lIntval)
break;
case 7 : //季
date.setMonth(date.getMonth() + (lIntval * 3) )
break;
case 5 ://月
date.setMonth(date.getMonth() + lIntval)
break;
case 4 ://天
date.setDate(date.getDate() + lIntval)
break
case 3 ://時
date.setHours(date.getHours() + lIntval)
break
case 2 ://分
date.setMinutes(date.getMinutes() + lIntval)
break
case 1 ://秒
date.setSeconds(date.getSeconds() + lIntval)
break;
default:
}
return new Date(date.getFullYear() +'/' + (date.getMonth()+1) + '/' +date.getDate()+ ' '+ date.getHours()+':'+date.getMinutes()+':'+date.getSeconds());
}
//轉換為日期形式無時間
function ToShortDate(date)
...{
return new Date(date.getFullYear() +'/' + (date.getMonth()+1) + '/' +date.getDate());
}
//有效日期單擊事件
function onClick()
...{
if(sender.onClick!=null)
...{
var date = this.value;
sender.selYear = date.getFullYear();
sender.selMonth = date.getMonth()+1;
sender.selDay = date.getDate();
sender.selWeek = null;
sender.selDays = 1;
sender.CreateChildControls();
sender.onClick(sender,this.value);
}
}
//鼠標移到有效日期上的事件
function onMouseOver()
...{
this.style.color = sender.selectColor;
this.style.backgroundColor = sender.selectBGColor;
}
//鼠標從有效日期上移開的事件
function onMouseOut()
...{
if(!this.selected)
...{
this.style.color = sender.bodyColor;
this.style.backgroundColor = sender.bodyBGColor;
}
}
}
//獲得選中的日期
ScriptDate.prototype.SelectDate = function()
...{
var redate = new Array();
var table = this.body;
for(var i=0; i<table.rows.length; i++)
...{
for(var j=0; j<table.rows[i].cells.length; j++)
...{
if(table.rows[i].cells[j].selected)
...{
redate.push(table.rows[i].cells[j].value);
}
}
}
if(redate.length<this.selDays)
...{
var lastdate = redate[redate.length-1];
var maxday = this.selDays-redate.length;
for(var i=1; i<=maxday; i++)
...{
redate.push(new Date(lastdate.getFullYear().toString() + "/" + (lastdate.getMonth()+2).toString() + "/" + i.toString()));
}
}
return redate;
}
2. 調用實例
var date = new ScriptDate(document.body);
date.onClick = GetDate;
////以下是設置當前所看到的月份的星期三被選中
//date.selDays = 1;
//date.selWeek = 3;
////以下是設置從所選日期開始的向後21天被選中
//date.selWeek = null;
//date.selDays = 21;
////以下是設置指定的年月日被選中
//date.selyear = 2006;
//date.selMonth = 11;
//date.selDay = 11;
date.Load();
//單擊日期後所執行的操作
//dateCtrl為日歷對象
//date為所單擊的日期
function GetDate(dateCtrl,date)
{
alert(date);
}
//可以通過調用方法SelectDate來取得所選中的日期
var redate = date.SelectDate();
for(var i=0; i<redate.length; i++)
{
alert(redate[i]);
}
注：具體屬性設置請參考對象的構造函數
3. 效果圖如下
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript【带时间的日期控件】
- Javascript－日期控件
- javascript 日期控件
- javascript 日期控件
- javascript日期输入控件
- javascript日期时间控件
- javascript版的日期输入控件
- W3C标准：带日期和时间的JAVASCRIPT日期时间控件
- 一个写得较好的JavaScript日期挑选控件
- 日期选择控件 完美支持XHTML（JavaScript）
- 非常实用的JavaScript 日期时间格式化 控件
- 免费的Javascript日期输入及选择控件大杂烩！
- [分享]精心收集的3款JavaScript实现的日期时间选择控件
- 给大家介绍一个日期输入控件javascript实现，我修改了下，符合我的习惯了，^_^！
- meizz(梅花雨)用javascript写的一个日期输入控件!
- 基于Asp.net与Javascript控制的日期控件
- javascript 日期控件2
- javascript的日期控件
- javascript版的日期输入控件
- 免费的Javascript日期输入及选择控件大全