zoukankan
html css js c++ java
textbox获得焦点显示JS日历控件
网上下的JS日历控件
日历控件
function
PopupCalendar(InstanceName)
{
//
/Global Tag
this
.instanceName
=
InstanceName;
//
/Properties
this
.separator
=
"
-
"
this
.oBtnTodayTitle
=
"
Today
"
this
.oBtnCancelTitle
=
"
Cancel
"
this
.weekDaySting
=
new
Array(
"
S
"
,
"
M
"
,
"
T
"
,
"
W
"
,
"
T
"
,
"
F
"
,
"
S
"
);
this
.monthSting
=
new
Array(
"
January
"
,
"
February
"
,
"
March
"
,
"
April
"
,
"
May
"
,
"
June
"
,
"
July
"
,
"
August
"
,
"
September
"
,
"
October
"
,
"
November
"
,
"
December
"
);
this
.Width
=
200
;
this
.currDate
=
new
Date();
this
.today
=
new
Date();
this
.startYear
=
1970
;
this
.endYear
=
2010
;
//
/Css
this
.normalfontColor
=
"
#666666
"
;
this
.selectedfontColor
=
"
red
"
;
this
.divBorderCss
=
"
1px solid #BCD0DE
"
;
this
.titleTableBgColor
=
"
#98B8CD
"
;
this
.tableBorderColor
=
"
#CCCCCC
"
//
/Method
this
.Init
=
CalendarInit;
this
.Fill
=
CalendarFill;
this
.Refresh
=
CalendarRefresh;
this
.Restore
=
CalendarRestore;
//
/HTMLObject
this
.oTaget
=
null
;
this
.oPreviousCell
=
null
;
this
.sDIVID
=
InstanceName
+
"
_Div
"
;
this
.sTABLEID
=
InstanceName
+
"
_Table
"
;
this
.sMONTHID
=
InstanceName
+
"
_Month
"
;
this
.sYEARID
=
InstanceName
+
"
_Year
"
;
this
.sTODAYBTNID
=
InstanceName
+
"
_TODAYBTN
"
;
}
function
CalendarInit()
//
/Create panel
{
var
sMonth,sYear
sMonth
=
this
.currDate.getMonth();
sYear
=
this
.currDate.getYear();
htmlAll
=
"
<div id='
"
+
this
.sDIVID
+
"
' style='display:none;position:absolute;
"
+
this
.Width
+
"
;border:
"
+
this
.divBorderCss
+
"
;padding:2px;background-color:#FFFFFF'>
"
;
htmlAll
+=
"
<div align='center'>
"
;
//
/ Month
htmloMonth
=
"
<select id='
"
+
this
.sMONTHID
+
"
' onchange=CalendarMonthChange(
"
+
this
.instanceName
+
"
) style='50%'>
"
;
for
(i
=
0
;i
<
12
;i
++
)
{
htmloMonth
+=
"
<option value='
"
+
i
+
"
'>
"
+
this
.monthSting[i]
+
"
</option>
"
;
}
htmloMonth
+=
"
</select>
"
;
//
/ Year
htmloYear
=
"
<select id='
"
+
this
.sYEARID
+
"
' onchange=CalendarYearChange(
"
+
this
.instanceName
+
"
) style='50%'>
"
;
for
(i
=
this
.startYear;i
<=
this
.endYear;i
++
)
{
htmloYear
+=
"
<option value='
"
+
i
+
"
'>
"
+
i
+
"
</option>
"
;
}
htmloYear
+=
"
</select></div>
"
;
//
/ Day
htmloDayTable
=
"
<table id='
"
+
this
.sTABLEID
+
"
' width='100%' border=0 cellpadding=0 cellspacing=1 bgcolor='
"
+
this
.tableBorderColor
+
"
'>
"
;
htmloDayTable
+=
"
<tbody bgcolor='#ffffff'style='font-size:13px'>
"
;
for
(i
=
0
;i
<=
6
;i
++
)
{
if
(i
==
0
)
htmloDayTable
+=
"
<tr bgcolor='
"
+
this
.titleTableBgColor
+
"
'>
"
;
else
htmloDayTable
+=
"
<tr>
"
;
for
(j
=
0
;j
<
7
;j
++
)
{
if
(i
==
0
)
{
htmloDayTable
+=
"
<td height='20' align='center' valign='middle' style='cursor:hand'>
"
;
htmloDayTable
+=
this
.weekDaySting[j]
+
"
</td>
"
}
else
{
htmloDayTable
+=
"
<td height='20' align='center' valign='middle' style='cursor:hand'
"
;
htmloDayTable
+=
"
onmouseover=CalendarCellsMsOver(
"
+
this
.instanceName
+
"
)
"
;
htmloDayTable
+=
"
onmouseout=CalendarCellsMsOut(
"
+
this
.instanceName
+
"
)
"
;
htmloDayTable
+=
"
onclick=CalendarCellsClick(this,
"
+
this
.instanceName
+
"
)>
"
;
htmloDayTable
+=
"
</td>
"
}
}
htmloDayTable
+=
"
</tr>
"
;
}
htmloDayTable
+=
"
</tbody></table>
"
;
//
/ Today Button
htmloButton
=
"
<div align='center' style='padding:3px'>
"
htmloButton
+=
"
<button id='
"
+
this
.sTODAYBTNID
+
"
' style='40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'
"
htmloButton
+=
"
onclick=CalendarTodayClick(
"
+
this
.instanceName
+
"
)>
"
+
this
.oBtnTodayTitle
+
"
</button>
"
htmloButton
+=
"
<button style='40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'
"
htmloButton
+=
"
onclick=CalendarCancel(
"
+
this
.instanceName
+
"
)>
"
+
this
.oBtnCancelTitle
+
"
</button>
"
htmloButton
+=
"
</div>
"
//
/ All
htmlAll
=
htmlAll
+
htmloMonth
+
htmloYear
+
htmloDayTable
+
htmloButton
+
"
</div>
"
;
document.write(htmlAll);
this
.Fill();
}
function
CalendarFill()
//
/
{
var
sMonth,sYear,sWeekDay,sToday,oTable,currRow,MaxDay,iDaySn,sIndex,rowIndex,cellIndex,oSelectMonth,oSelectYear
sMonth
=
this
.currDate.getMonth();
sYear
=
this
.currDate.getYear();
sWeekDay
=
(
new
Date(sYear,sMonth,
1
)).getDay();
sToday
=
this
.currDate.getDate();
iDaySn
=
1
oTable
=
document.all[
this
.sTABLEID];
currRow
=
oTable.rows[
1
];
MaxDay
=
CalendarGetMaxDay(sYear,sMonth);
oSelectMonth
=
document.all[
this
.sMONTHID]
oSelectMonth.selectedIndex
=
sMonth;
oSelectYear
=
document.all[
this
.sYEARID]
for
(i
=
0
;i
<
oSelectYear.length;i
++
)
{
if
(parseInt(oSelectYear.options[i].value)
==
sYear)oSelectYear.selectedIndex
=
i;
}
//
//
for
(rowIndex
=
1
;rowIndex
<=
6
;rowIndex
++
)
{
if
(iDaySn
>
MaxDay)
break
;
currRow
=
oTable.rows[rowIndex];
cellIndex
=
0
;
if
(rowIndex
==
1
)cellIndex
=
sWeekDay;
for
(;cellIndex
<
currRow.cells.length;cellIndex
++
)
{
if
(iDaySn
==
sToday)
{
currRow.cells[cellIndex].innerHTML
=
"
<font color='
"
+
this
.selectedfontColor
+
"
'><i><b>
"
+
iDaySn
+
"
</b></i></font>
"
;
this
.oPreviousCell
=
currRow.cells[cellIndex];
}
else
{
currRow.cells[cellIndex].innerHTML
=
iDaySn;
currRow.cells[cellIndex].style.color
=
this
.normalfontColor;
}
CalendarCellSetCss(
0
,currRow.cells[cellIndex]);
iDaySn
++
;
if
(iDaySn
>
MaxDay)
break
;
}
}
}
function
CalendarRestore()
//
/ Clear Data
{
var
i,j,oTable
oTable
=
document.all[
this
.sTABLEID]
for
(i
=
1
;i
<
oTable.rows.length;i
++
)
{
for
(j
=
0
;j
<
oTable.rows[i].cells.length;j
++
)
{
CalendarCellSetCss(
0
,oTable.rows[i].cells[j]);
oTable.rows[i].cells[j].innerHTML
=
"
"
;
}
}
}
function
CalendarRefresh(newDate)
//
/
{
this
.currDate
=
newDate;
this
.Restore();
this
.Fill();
}
function
CalendarCellsMsOver(oInstance)
//
/ Cell MouseOver
{
var
myCell
=
event.srcElement;
CalendarCellSetCss(
0
,oInstance.oPreviousCell);
if
(myCell)
{
CalendarCellSetCss(
1
,myCell);
oInstance.oPreviousCell
=
myCell;
}
}
function
CalendarCellsMsOut(oInstance)
//
//// Cell MouseOut
{
var
myCell
=
event.srcElement;
CalendarCellSetCss(
0
,myCell);
}
function
CalendarYearChange(oInstance)
//
/ Year Change
{
var
sDay,sMonth,sYear,newDate
sDay
=
oInstance.currDate.getDate();
sMonth
=
oInstance.currDate.getMonth();
sYear
=
document.all[oInstance.sYEARID].value
newDate
=
new
Date(sYear,sMonth,sDay);
oInstance.Refresh(newDate);
}
function
CalendarMonthChange(oInstance)
//
/ Month Change
{
var
sDay,sMonth,sYear,newDate
sDay
=
oInstance.currDate.getDate();
sMonth
=
document.all[oInstance.sMONTHID].value
sYear
=
oInstance.currDate.getYear();
newDate
=
new
Date(sYear,sMonth,sDay);
oInstance.Refresh(newDate);
}
function
CalendarCellsClick(oCell,oInstance)
{
var
sDay,sMonth,sYear,newDate
sYear
=
oInstance.currDate.getFullYear();
sMonth
=
oInstance.currDate.getMonth();
sDay
=
oInstance.currDate.getDate();
if
(oCell.innerText
!=
"
"
)
{
sDay
=
parseInt(oCell.innerText);
if
(sDay
!=
oInstance.currDate.getDate())
{
newDate
=
new
Date(sYear,sMonth,sDay);
oInstance.Refresh(newDate);
}
}
sDateString
=
sYear
+
oInstance.separator
+
CalendarDblNum(sMonth
+
1
)
+
oInstance.separator
+
CalendarDblNum(sDay);
//
/return sDateString
if
(oInstance.oTaget.tagName.toLowerCase()
==
"
input
"
)oInstance.oTaget.value
=
sDateString;
CalendarCancel(oInstance);
return
sDateString;
}
function
CalendarTodayClick(oInstance)
//
/ "Today" button Change
{
oInstance.Refresh(
new
Date());
}
function
getDateString(oInputSrc,oInstance)
{
if
(oInputSrc
&&
oInstance)
{
var
CalendarDiv
=
document.all[oInstance.sDIVID];
oInstance.oTaget
=
oInputSrc;
CalendarDiv.style.pixelLeft
=
CalendargetPos(oInputSrc,
"
Left
"
);
CalendarDiv.style.pixelTop
=
CalendargetPos(oInputSrc,
"
Top
"
)
+
oInputSrc.offsetHeight;
CalendarDiv.style.display
=
(CalendarDiv.style.display
==
"
none
"
)
?
""
:
"
none
"
;
}
}
function
CalendarCellSetCss(sMode,oCell)
//
/ Set Cell Css
{
//
sMode
//
0: OnMouserOut 1: OnMouseOver
if
(sMode)
{
oCell.style.border
=
"
1px solid #5589AA
"
;
oCell.style.backgroundColor
=
"
#BCD0DE
"
;
}
else
{
oCell.style.border
=
"
1px solid #FFFFFF
"
;
oCell.style.backgroundColor
=
"
#FFFFFF
"
;
}
}
function
CalendarGetMaxDay(nowYear,nowMonth)
//
/ Get MaxDay of current month
{
var
nextMonth,nextYear,currDate,nextDate,theMaxDay
nextMonth
=
nowMonth
+
1
;
if
(nextMonth
>
11
)
{
nextYear
=
nowYear
+
1
;
nextMonth
=
0
;
}
else
{
nextYear
=
nowYear;
}
currDate
=
new
Date(nowYear,nowMonth,
1
);
nextDate
=
new
Date(nextYear,nextMonth,
1
);
theMaxDay
=
(nextDate
-
currDate)
/
(
24
*
60
*
60
*
1000
);
return
theMaxDay;
}
function
CalendargetPos(el,ePro)
//
/ Get Absolute Position
{
var
ePos
=
0
;
while
(el
!=
null
)
{
ePos
+=
el[
"
offset
"
+
ePro];
el
=
el.offsetParent;
}
return
ePos;
}
function
CalendarDblNum(num)
{
if
(num
<
10
)
return
"
0
"
+
num;
else
return
num;
}
function
CalendarCancel(oInstance)
//
/Cancel
{
var
CalendarDiv
=
document.all[oInstance.sDIVID];
CalendarDiv.style.display
=
"
none
"
;
}
保存为:PopupCalendar.js
调用的页面上写下以下脚本:
<
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
>
页面上:
<
INPUT
id
="aa"
onfocus
="getDateString(this,oCalendarChs)"
readOnly type
="text"
value
="中文界面版"
name
="dd"
runat
="server"
>
查看全文
相关阅读:
AS3 setChildIndex的bug
android mediaplayer Should have subtitle controller already set
添加糢糊视图
Android Studio Gradle project sync failed
VS2012 生成可以在XP下运行的exe文件
JavaScript this的理解
Adobe AIR 应用程序图标详细描述
Ubuntu16.04下安装httpd+svn+viewVC
win10将mongodb加入系统服务,官方源码报错问题记录
汇图网爬虫
原文地址:https://www.cnblogs.com/luanwey/p/533702.html
最新文章
前端框架本质之探究——以Vue.js为例
cinder的组件
cinder创建volume的流程-简单梳理
Ansible系列(四):playbook应用和roles自动化批量安装示例
Ansible系列(五):各种变量定义方式和变量引用
Ansible系列(三):YAML语法和playbook写法
boot,rebuild,resize,migrate有关的scheduler流程
SQL语句的强化
PostgreSQL
Docker
热门文章
Ubuntu安装MySQL5.7.28
CSS三角强化、CSS3初始化、CSS3新特性
精灵技术、字体图标、CSS三角、用户界面样式、溢出文字显示、常见布局技巧
定位与几个常用的属性
三大布局共用(标准流,浮动,定位)
CSS三大特性与盒子模型
Ubuntu16.04更新源(加速下载)
Material Design with the Android Design Support Library
获取调试模式
Android studio Error occurred during initialization of VM
Copyright © 2011-2022 走看看