js实现日期选择控件Word文档格式.docx
《js实现日期选择控件Word文档格式.docx》由会员分享，可在线阅读，更多相关《js实现日期选择控件Word文档格式.docx（23页珍藏版）》请在冰豆网上搜索。
*@authorFreshFlower<
wpt206@>
*@site
*@version1.0.2
*********************************************************************/
varJTC={};
JTC.config={
//日期背景颜色与字体颜色依次:
可选择;
今天;
鼠标移过;
不可选择
dayBgColor:
['
#B1ED89'
'
#FF66E0'
#F9D23A'
'
#EDECF0'
],
dayColor:
#303136'
#6F6F6F'
forward:
0,//控制日期可选择的范围0:
无限制;
1:
仅可选择过去的日期;
2.仅可选择未来的日期
includeToday:
1,//是否可以选择今天:
0:
不可选1:
可以选择;
format:
'
yyyy-MM-dd'
//返回日期值的格式
outObject:
null,
bgDivID:
JTC_BG_DIV'
yearSpan:
JTC_TheCurYear'
yearSelectSpan:
JTC_SelectYearLayer'
yearSelectCtrl:
JTC_SelectYearCtrl'
monthSpan:
JTC_TheCurMonth'
monthSelectSpan:
JTC_SelectMonthLayer'
monthSelectCtrl:
JTC_SelectMonthCtrl'
dayPanelId:
JTC_TheCurDay'
};
JTC.$=function（id,doc）{
vardoc=doc||document;
returndoc.getElementById（id）;
JTC.$$=function（name,doc）{
returndoc.createElement（name）;
JTC.browser=（function（）{
varua=navigator.userAgent.toLowerCase（）;
return{
VERSION:
ua.match（/（msie|firefox|webkit|opera）[\/:
\s]（\d+）/）?
RegExp.$2:
0'
IE:
（ua.indexOf（'
msie'
）>
-1&
&
ua.indexOf（'
opera'
）==-1）,
GECKO:
gecko'
khtml'
WEBKIT:
applewebkit'
-1）,
OPERA:
-1）
};
}）（）;
JTC.util={
createTable:
function（doc）{
vartable=JTC.$$（'
table'
doc）;
table.cellPadding=0;
table.cellSpacing=0;
table.border=0;
return{table:
table,cell:
table.insertRow（0）.insertCell（0）};
},
formatDate:
function（date,format）{
varlang={
M+'
:
date.getMonth（）+1,
d+'
date.getDate（）
if（/（y+）/.test（format））{
format=format.replace（RegExp.$1,（date.getFullYear（）+'
'
）.substr（4-RegExp.$1.length））;
}
for（varkeyinlang）{
if（newRegExp（'
（'
+key+'
）'
）.test（format））{
format=format.replace（RegExp.$1,RegExp.$1.length==1?
lang[key]:
（'
00'
+lang[key]）.substr（（'
+lang[key]）.length））;
returnformat;
addEvent:
function（el,event,listener）{
if（el.addEventListener）{
el.addEventListener（event,listener,false）;
}elseif（el.attachEvent）{
el.attachEvent（'
on'
+event,listener）;
}
getCoords:
function（ev）{
ev=ev||window.event;
x:
ev.clientX,
y:
ev.clientY
getDocumentElement:
function（doc）{
doc=doc||document;
return（patMode!
="
CSS1Compat"
）?
doc.body:
doc.documentElement;
getScrollPos:
function（）{
varx,y;
if（JTC.browser.IE||JTC.browser.OPERA）{
varel=this.getDocumentElement（）;
x=el.scrollLeft;
y=el.scrollTop;
}else{
x=window.scrollX;
y=window.scrollY;
return{x:
x,y:
y};
getElementPos:
function（el）{
varx=0,y=0;
if（el.getBoundingClientRect）{
varbox=el.getBoundingClientRect（）;
varpos=this.getScrollPos（）;
x=box.left+pos.x-el.clientLeft;
y=box.top+pos.y-el.clientTop;
x=el.offsetLeft;
y=el.offsetTop;
varparent=el.offsetParent;
while（parent）{
x+=parent.offsetLeft;
y+=parent.offsetTop;
parent=parent.offsetParent;
JTC.dialog=function（）{
this.getYMSelect=function（）{
vartable=JTC.util.createTable（）.table;
table.setAttribute（'
style'
width:
100%;
cursor:
default;
font-size:
12px;
）;
table.style.cssText='
;
varrow=table.insertRow（0）;
varcell=row.insertCell（0）;
cell.style.width='
50px'
cell.style.textAlign='
right'
varhtml='
spanid="
+JTC.config.yearSpan+'
"
title="
点击这里选择年份"
style="
50px;
pointer;
onclick="
JTC.events.beginToSelectYear（）"
2010<
/span>
html+='
+JTC.config.yearSelectSpan+'
display:
none;
width:
cell.innerHTML=html;
cell=row.insertCell
（1）;
40px'
left'
html='
+JTC.config.monthSpan+'
点击这里选择月份"
40px;
JTC.events.beginToSelectMonth（）"
10<
+JTC.config.monthSelectSpan+'
returntable;
this.getHeadPanel=function（）{
height:
cell.setAttribute（'
23px;
height:
26px;
cell.style.cssText='
cell.title='
往前翻月'
cell.innerHTML='
button"
value="
JTC.events.turnTheMonth（-1）"
cell.appendChild（this.getYMSelect（））;
cell=row.insertCell
（2）;
往后翻月'
JTC.events.turnTheMonth
（1）"
this.getWeekPanel=function（）{
font-size:
table.cellSpacing=1;
varweekDay=['
日'
一'
二'
三'
四'
五'
六'
];
for（vari=0;
i<
7;
i++）
{
varcell=row.insertCell（i）;
20px'
cell.style.height='
cell.style.backgroundColor='
#858F5F'
center'
cell.innerHTML=weekDay[i];
this.getDayPanel=function（）
varcount=0;
for（vari=0;
=5;
i++）{
varrow=table.insertRow（i）;
for（varj=0;
j<
j++）{
varcell=row.insertCell（j）;
20px;
text-align:
center;
font-weight:
bold;
cell.id=JTC.config.dayPanelId+count;
if（count>
36）{
cell.colSpan=5;
关闭"
45px;
JTC.events.hideLayout（）"
break;
count++;
this.getBottomPanel=function（）
table.style.width='
140px'
25px'
往前翻年'
25px;
auto;
JTC.events.turnTheYear（-1）"
今天"
JTC.events.resetToToday（）"
cell=row.insertCell（3）;
cell=row.insertCell（4）;
往后翻年'
JTC.events.turnTheYear
（1）"
varload=JTC.util.createTable（）.table;
load.setAttribute（'
140px;
160px;
background-color:
#ffffff;
position:
absolute;
border-collapse:
collapse;
load.style.cssText='
load.border=1;
load.borderColor='
varrow=load.insertRow（0）;
cell.appendChild（this.getHeadPanel（））;
row=load.insertRow
（1）;
cell=row.insertCell（0）;
cell.appendChild（this.getWeekPanel（））;
row=load.insertRow
（2）;
cell.appendChild（this.getDayPanel（））;
row=load.insertRow（3）;
cell.appendChild（this.getBottomPanel（））;
vardiv=JTC.$$（'
div'
div.id=JTC.config.bgDivID;
div.setAttribute（'
position:
142;
166;
z-index:
20000;
background-color:
lightgreen;
div.style.cssText='
div.appendChild（load）;
document.body.appendChild（div）;
JTC.util.addEvent（document,'
keydown'
JTC.events.keyDown）;
mousedown'
JTC.events.mouseDown）;
JTC.events={
//是否为闰年
isLeapYear:
function（year）{
if（0==year%4&
（（year%100!
=0）||（year%400
升级会员 