JAVASCRIPT中时间控件的实现
2007-08-07 20:25
351 查看
项目说明 在WEB项目开发中 我们往往会遇到需要用户输入时间的问题,HTML没有专门的时间控件,我们可以使用JAVASCRIPT实现我们自己的 时间控件,方便用户输入.我们可以在date.js文件中实现时间控件的所有功能,然后在对应的JSP文件中直接引用date.js文件即可,date.js文件内容如下
isIE = (document.all ? true : false);
function getIEPosX(elt) { return getIEPos(elt,"Left"); }
function getIEPosY(elt) { return getIEPos(elt,"Top"); }
function getIEPos(elt,which) {
iPos = 0
while (elt!=null) {
iPos += elt["offset" + which]
elt = elt.offsetParent
}
return iPos
}
function getXBrowserRef(eltname) {
return (isIE ? document.all[eltname].style : document.layers[eltname]);
}
function hideElement(eltname) { getXBrowserRef(eltname).visibility = 'hidden'; }
// 按不同的浏览器进行处理元件的位置
function moveBy(elt,deltaX,deltaY) {
if (isIE) {
elt.left = elt.pixelLeft + deltaX;
elt.top = elt.pixelTop + deltaY;
} else {
elt.left += deltaX;
elt.top += deltaY;
}
}
function toggleVisible(eltname) {
elt = getXBrowserRef(eltname);
if (elt.visibility == 'visible' || elt.visibility == 'show') {
elt.visibility = 'hidden';
} else {
fixPosition(eltname);
elt.visibility = 'visible';
}
}
function setPosition(elt,positionername,isPlacedUnder) {
positioner = null;
if (isIE) {
positioner = document.all[positionername];
elt.left = getIEPosX(positioner);
elt.top = getIEPosY(positioner);
} else {
positioner = document.images[positionername];
elt.left = positioner.x;
elt.top = positioner.y;
}
if (isPlacedUnder) { moveBy(elt,0,positioner.height); }
}
// 判断浏览器 isIE = (document.all ? true : false);
// 初始月份及各月份天数数组
var months = new Array("一 月", "二 月", "三 月", "四 月", "五 月", "六 月", "七 月",
"八 月", "九 月", "十 月", "十一月", "十二月");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31);
var displayMonth = new Date().getMonth();
var displayYear = new Date().getFullYear();
var displayDivName;
var displayElement;
function getDays(month, year) {
//测试选择的年份是否是润年?
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday() {
// 得到今天的日期
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
// 并显示今天这个月份的日历
today = new getToday();
function newCalendar(eltName,attachedElement) {
if (attachedElement) {
if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
displayElement = attachedElement;
}
displayDivName = eltName;
today = new getToday();
var parseYear = parseInt(displayYear + '');
var newCal = new Date(parseYear,displayMonth,1);
var day = -1;
var startDayOfWeek = newCal.getDay();
if ((today.year == newCal.getFullYear()) &&
(today.month == newCal.getMonth()))
{
day = today.day;
}
var intDaysInMonth =
getDays(newCal.getMonth(), newCal.getFullYear());
var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,newCal,eltName)
if (isIE) {
var elt = document.all[eltName];
elt.innerHTML = daysGrid;
} else {
var elt = document.layers[eltName].document;
elt.open();
elt.write(daysGrid);
elt.close();
}
}
function incMonth(delta,eltName) {
displayMonth += delta;
if (displayMonth >= 12) {
displayMonth = 0;
incYear(1,eltName);
} else if (displayMonth <= -1) {
displayMonth = 11;
incYear(-1,eltName);
} else {
newCalendar(eltName);
}
}
function incYear(delta,eltName) {
displayYear = parseInt(displayYear + '') + delta;
newCalendar(eltName);
}
function makeDaysGrid(startDay,day,intDaysInMonth,newCal,eltName) {
var daysGrid;
var month = newCal.getMonth();
var year = newCal.getFullYear();
var isThisYear = (year == new Date().getFullYear());
var isThisMonth = (day > -1)
daysGrid = '<table border=1 cellspacing=0 cellpadding=2><tr><td bgcolor=#ffffff nowrap>';
daysGrid += '<font face="courier new, courier" size=2>';
daysGrid += '<a href="javascript:hideElement(/'' + eltName + '/')">x</a>';
daysGrid += ' ';
daysGrid += '<a href="javascript:incMonth(-1,/'' + eltName + '/')">« </a>';
daysGrid += '<b>';
if (isThisMonth) { daysGrid += '<font color=red>' + months[month] + '</font>'; }
else { daysGrid += months[month]; }
daysGrid += '</b>';
daysGrid += '<a href="javascript:incMonth(1,/'' + eltName + '/')"> »</a>';
daysGrid += ' ';
daysGrid += '<a href="javascript:incYear(-1,/'' + eltName + '/')">« </a>';
daysGrid += '<b>';
if (isThisYear) { daysGrid += '<font color=red>' + year + '</font>'; }
else { daysGrid += ''+year; }
daysGrid += '</b>';
daysGrid += '<a href="javascript:incYear(1,/'' + eltName + '/')"> »</a><br>';
daysGrid += ' Su Mo Tu We Th Fr Sa <br> ';
var dayOfMonthOfFirstSunday = (7 - startDay + 1);
for (var intWeek = 0; intWeek < 6; intWeek++) {
var dayOfMonth;
for (var intDay = 0; intDay < 7; intDay++) {
dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday - 7;
if (dayOfMonth <= 0) {
daysGrid += " ";
} else if (dayOfMonth <= intDaysInMonth) {
var color = "blue";
if (day > 0 && day == dayOfMonth) color="red";
daysGrid += '<a href="javascript:setDay(';
daysGrid += dayOfMonth + ',/'' + eltName + '/')" '
daysGrid += 'style="color:' + color + '">';
var dayString = dayOfMonth + "</a> ";
if (dayString.length == 6) dayString = '0' + dayString;
daysGrid += dayString;
}
}
if (dayOfMonth < intDaysInMonth) daysGrid += "<br> ";
}
return daysGrid + "</td></tr></table>";
}
function setDay(day,eltName) {
// displayElement.value = (displayMonth + 1) + "/" + day + "/" + displayYear;
outMonth = ""+(displayMonth+1);
if(displayMonth < 9) {
outMonth = "0"+outMonth;
}
outDay = "" + day;
if(day < 10) {
outDay = "0"+day;
}
displayElement.value = displayYear+"-"+outMonth + "-" + outDay ;
hideElement(eltName);
}
//——————————————————————————————————————
// fixPosition() 这个函数和前面所讲的那个函数一样//
function fixPosition(eltname) {
elt = getXBrowserRef(eltname);
positionerImgName = eltname + 'Pos';
// hint: try setting isPlacedUnder to false
isPlacedUnder = false;
if (isPlacedUnder) {
setPosition(elt,positionerImgName,true);
} else {
setPosition(elt,positionerImgName)
}
}
function toggleDatePicker(eltName,formElt) {
var x = formElt.indexOf('.');
var formName = formElt.substring(0,x);
var formEltName = formElt.substring(x+1);
newCalendar(eltName,document.forms[formName].elements[formEltName]);
toggleVisible(eltName);
}
function MoveUp(SelectList)
{
var nIndex = SelectList.selectedIndex;
if (nIndex == -1)
{
alert("请先选一项呢!");
return;
}
if (nIndex == 0)
{
return;
}
var objSelected = new Option(SelectList[nIndex].text, SelectList[nIndex].value);
var objPrevious = new Option(SelectList[nIndex-1].text, SelectList[nIndex-1].value);
SelectList.options[nIndex] = objPrevious;
SelectList.options[nIndex-1] = objSelected;
SelectList.options[nIndex-1].selected = true;
}
function MoveDown(SelectList)
{
var nIndex = SelectList.selectedIndex;
if (nIndex == -1)
{
alert("请先选一项呢!");
return;
}
if (nIndex == SelectList.options.length-1)
{
return;
}
var objSelected = new Option(SelectList[nIndex].text, SelectList[nIndex].value);
var objPrevious = new Option(SelectList[nIndex+1].text, SelectList[nIndex+1].value);
SelectList.options[nIndex] = objPrevious;
SelectList.options[nIndex+1] = objSelected;
SelectList.options[nIndex+1].selected = true;
}
function Move(SourceList,TargetList)
{
var nIndex = SourceList.selectedIndex;
if (nIndex == -1)
{
alert("请先选一项呢!");
return;
}
var objSelected = new Option(SourceList[nIndex].text, SourceList[nIndex].value);
TargetList.options[TargetList.length] = objSelected;
SourceList.options[nIndex] = null;
TargetList.options[TargetList.length-1].selected = true;
if(navigator.appName=="Netscape")
{
history.go(0)
}
}
function MoveAll(SourceList,TargetList)
{
var nIndex = SourceList.selectedIndex;
if (nIndex == -1){
alert("请先选一项呢!");
return;
}
var len = SourceList.length;
var start = 0;
for( i=0;i<len;i++)
{
nIndex = SourceList.selectedIndex;
if (nIndex == -1){
return;
}
var objSelected = new Option(SourceList[nIndex].text, SourceList[nIndex].value);
TargetList.options[TargetList.length] = objSelected;
SourceList.options[nIndex] = null;
TargetList.options[TargetList.length-1].selected = true;
}
if(navigator.appName=="Netscape")
{
history.go(0)
}
}
function SaveLayout(SelectList,strResult)
{
var result="0";
for (i=0;i<SelectList.length;i++)
{
result = result+","+SelectList.options[i].value;
}
strResult.value = result;
}
这样当我们在JSP页面要使用时间控件时,只要引入date.js即可,代码如下所示
<script type='text/javascript' src=js/date.js'></script>
<tr>
<td width="110" align="right" class="data_td">开始:</td>
<td align="left" bgcolor="#FFFFFF" class="data_tr">
<input type="text" name="startDate" readonly="true" size="20" value="<%=startDate%>"/>
<img onmouseup="toggleDatePicker('daysOfMonth','0.startDate')" id=daysOfMonthpos height=21 alt="date picker" src="img/calendaricon.gif" width=34 align=absMiddle border=0 name=daysOfMonthPos>
<div id=daysOfMonth style="POSITION: absolute"></div></td>
</tr>
isIE = (document.all ? true : false);
function getIEPosX(elt) { return getIEPos(elt,"Left"); }
function getIEPosY(elt) { return getIEPos(elt,"Top"); }
function getIEPos(elt,which) {
iPos = 0
while (elt!=null) {
iPos += elt["offset" + which]
elt = elt.offsetParent
}
return iPos
}
function getXBrowserRef(eltname) {
return (isIE ? document.all[eltname].style : document.layers[eltname]);
}
function hideElement(eltname) { getXBrowserRef(eltname).visibility = 'hidden'; }
// 按不同的浏览器进行处理元件的位置
function moveBy(elt,deltaX,deltaY) {
if (isIE) {
elt.left = elt.pixelLeft + deltaX;
elt.top = elt.pixelTop + deltaY;
} else {
elt.left += deltaX;
elt.top += deltaY;
}
}
function toggleVisible(eltname) {
elt = getXBrowserRef(eltname);
if (elt.visibility == 'visible' || elt.visibility == 'show') {
elt.visibility = 'hidden';
} else {
fixPosition(eltname);
elt.visibility = 'visible';
}
}
function setPosition(elt,positionername,isPlacedUnder) {
positioner = null;
if (isIE) {
positioner = document.all[positionername];
elt.left = getIEPosX(positioner);
elt.top = getIEPosY(positioner);
} else {
positioner = document.images[positionername];
elt.left = positioner.x;
elt.top = positioner.y;
}
if (isPlacedUnder) { moveBy(elt,0,positioner.height); }
}
// 判断浏览器 isIE = (document.all ? true : false);
// 初始月份及各月份天数数组
var months = new Array("一 月", "二 月", "三 月", "四 月", "五 月", "六 月", "七 月",
"八 月", "九 月", "十 月", "十一月", "十二月");
var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31,
30, 31, 30, 31);
var displayMonth = new Date().getMonth();
var displayYear = new Date().getFullYear();
var displayDivName;
var displayElement;
function getDays(month, year) {
//测试选择的年份是否是润年?
if (1 == month)
return ((0 == year % 4) && (0 != (year % 100))) ||
(0 == year % 400) ? 29 : 28;
else
return daysInMonth[month];
}
function getToday() {
// 得到今天的日期
this.now = new Date();
this.year = this.now.getFullYear();
this.month = this.now.getMonth();
this.day = this.now.getDate();
}
// 并显示今天这个月份的日历
today = new getToday();
function newCalendar(eltName,attachedElement) {
if (attachedElement) {
if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
displayElement = attachedElement;
}
displayDivName = eltName;
today = new getToday();
var parseYear = parseInt(displayYear + '');
var newCal = new Date(parseYear,displayMonth,1);
var day = -1;
var startDayOfWeek = newCal.getDay();
if ((today.year == newCal.getFullYear()) &&
(today.month == newCal.getMonth()))
{
day = today.day;
}
var intDaysInMonth =
getDays(newCal.getMonth(), newCal.getFullYear());
var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,newCal,eltName)
if (isIE) {
var elt = document.all[eltName];
elt.innerHTML = daysGrid;
} else {
var elt = document.layers[eltName].document;
elt.open();
elt.write(daysGrid);
elt.close();
}
}
function incMonth(delta,eltName) {
displayMonth += delta;
if (displayMonth >= 12) {
displayMonth = 0;
incYear(1,eltName);
} else if (displayMonth <= -1) {
displayMonth = 11;
incYear(-1,eltName);
} else {
newCalendar(eltName);
}
}
function incYear(delta,eltName) {
displayYear = parseInt(displayYear + '') + delta;
newCalendar(eltName);
}
function makeDaysGrid(startDay,day,intDaysInMonth,newCal,eltName) {
var daysGrid;
var month = newCal.getMonth();
var year = newCal.getFullYear();
var isThisYear = (year == new Date().getFullYear());
var isThisMonth = (day > -1)
daysGrid = '<table border=1 cellspacing=0 cellpadding=2><tr><td bgcolor=#ffffff nowrap>';
daysGrid += '<font face="courier new, courier" size=2>';
daysGrid += '<a href="javascript:hideElement(/'' + eltName + '/')">x</a>';
daysGrid += ' ';
daysGrid += '<a href="javascript:incMonth(-1,/'' + eltName + '/')">« </a>';
daysGrid += '<b>';
if (isThisMonth) { daysGrid += '<font color=red>' + months[month] + '</font>'; }
else { daysGrid += months[month]; }
daysGrid += '</b>';
daysGrid += '<a href="javascript:incMonth(1,/'' + eltName + '/')"> »</a>';
daysGrid += ' ';
daysGrid += '<a href="javascript:incYear(-1,/'' + eltName + '/')">« </a>';
daysGrid += '<b>';
if (isThisYear) { daysGrid += '<font color=red>' + year + '</font>'; }
else { daysGrid += ''+year; }
daysGrid += '</b>';
daysGrid += '<a href="javascript:incYear(1,/'' + eltName + '/')"> »</a><br>';
daysGrid += ' Su Mo Tu We Th Fr Sa <br> ';
var dayOfMonthOfFirstSunday = (7 - startDay + 1);
for (var intWeek = 0; intWeek < 6; intWeek++) {
var dayOfMonth;
for (var intDay = 0; intDay < 7; intDay++) {
dayOfMonth = (intWeek * 7) + intDay + dayOfMonthOfFirstSunday - 7;
if (dayOfMonth <= 0) {
daysGrid += " ";
} else if (dayOfMonth <= intDaysInMonth) {
var color = "blue";
if (day > 0 && day == dayOfMonth) color="red";
daysGrid += '<a href="javascript:setDay(';
daysGrid += dayOfMonth + ',/'' + eltName + '/')" '
daysGrid += 'style="color:' + color + '">';
var dayString = dayOfMonth + "</a> ";
if (dayString.length == 6) dayString = '0' + dayString;
daysGrid += dayString;
}
}
if (dayOfMonth < intDaysInMonth) daysGrid += "<br> ";
}
return daysGrid + "</td></tr></table>";
}
function setDay(day,eltName) {
// displayElement.value = (displayMonth + 1) + "/" + day + "/" + displayYear;
outMonth = ""+(displayMonth+1);
if(displayMonth < 9) {
outMonth = "0"+outMonth;
}
outDay = "" + day;
if(day < 10) {
outDay = "0"+day;
}
displayElement.value = displayYear+"-"+outMonth + "-" + outDay ;
hideElement(eltName);
}
//——————————————————————————————————————
// fixPosition() 这个函数和前面所讲的那个函数一样//
function fixPosition(eltname) {
elt = getXBrowserRef(eltname);
positionerImgName = eltname + 'Pos';
// hint: try setting isPlacedUnder to false
isPlacedUnder = false;
if (isPlacedUnder) {
setPosition(elt,positionerImgName,true);
} else {
setPosition(elt,positionerImgName)
}
}
function toggleDatePicker(eltName,formElt) {
var x = formElt.indexOf('.');
var formName = formElt.substring(0,x);
var formEltName = formElt.substring(x+1);
newCalendar(eltName,document.forms[formName].elements[formEltName]);
toggleVisible(eltName);
}
function MoveUp(SelectList)
{
var nIndex = SelectList.selectedIndex;
if (nIndex == -1)
{
alert("请先选一项呢!");
return;
}
if (nIndex == 0)
{
return;
}
var objSelected = new Option(SelectList[nIndex].text, SelectList[nIndex].value);
var objPrevious = new Option(SelectList[nIndex-1].text, SelectList[nIndex-1].value);
SelectList.options[nIndex] = objPrevious;
SelectList.options[nIndex-1] = objSelected;
SelectList.options[nIndex-1].selected = true;
}
function MoveDown(SelectList)
{
var nIndex = SelectList.selectedIndex;
if (nIndex == -1)
{
alert("请先选一项呢!");
return;
}
if (nIndex == SelectList.options.length-1)
{
return;
}
var objSelected = new Option(SelectList[nIndex].text, SelectList[nIndex].value);
var objPrevious = new Option(SelectList[nIndex+1].text, SelectList[nIndex+1].value);
SelectList.options[nIndex] = objPrevious;
SelectList.options[nIndex+1] = objSelected;
SelectList.options[nIndex+1].selected = true;
}
function Move(SourceList,TargetList)
{
var nIndex = SourceList.selectedIndex;
if (nIndex == -1)
{
alert("请先选一项呢!");
return;
}
var objSelected = new Option(SourceList[nIndex].text, SourceList[nIndex].value);
TargetList.options[TargetList.length] = objSelected;
SourceList.options[nIndex] = null;
TargetList.options[TargetList.length-1].selected = true;
if(navigator.appName=="Netscape")
{
history.go(0)
}
}
function MoveAll(SourceList,TargetList)
{
var nIndex = SourceList.selectedIndex;
if (nIndex == -1){
alert("请先选一项呢!");
return;
}
var len = SourceList.length;
var start = 0;
for( i=0;i<len;i++)
{
nIndex = SourceList.selectedIndex;
if (nIndex == -1){
return;
}
var objSelected = new Option(SourceList[nIndex].text, SourceList[nIndex].value);
TargetList.options[TargetList.length] = objSelected;
SourceList.options[nIndex] = null;
TargetList.options[TargetList.length-1].selected = true;
}
if(navigator.appName=="Netscape")
{
history.go(0)
}
}
function SaveLayout(SelectList,strResult)
{
var result="0";
for (i=0;i<SelectList.length;i++)
{
result = result+","+SelectList.options[i].value;
}
strResult.value = result;
}
这样当我们在JSP页面要使用时间控件时,只要引入date.js即可,代码如下所示
<script type='text/javascript' src=js/date.js'></script>
<tr>
<td width="110" align="right" class="data_td">开始:</td>
<td align="left" bgcolor="#FFFFFF" class="data_tr">
<input type="text" name="startDate" readonly="true" size="20" value="<%=startDate%>"/>
<img onmouseup="toggleDatePicker('daysOfMonth','0.startDate')" id=daysOfMonthpos height=21 alt="date picker" src="img/calendaricon.gif" width=34 align=absMiddle border=0 name=daysOfMonthPos>
<div id=daysOfMonth style="POSITION: absolute"></div></td>
</tr>
相关文章推荐
- 用javascript实现的日期时间输入控件
- [分享]精心收集的3款JavaScript实现的日期时间选择控件
- 用javascript实现的日期时间输入控件
- 基于JavaScript与DBGRID控件的B/S结构客户端联想式录入技术的设计与实现
- asp.net使用javascript实现不刷新页面获取当前时间
- 基于JavaScript实现一定时间后去执行一个函数
- 轻松实现可扩展自定义的Android滚轮时间选择控件
- 原生javascript实现自动更新的时间日期
- javascript实现WEB打印(用window.open()实现).不用安装任何控件.(含代码)分享
- Android控件之使用ListView实现时间轴效果
- 在ASP.NET中利JavaScript实现控件的聚焦(转)
- javascript实现获取服务器时间
- asp.net 实现动态显示当前时间(不用javascript不考虑开销)
- javascript/HTML实现多个text控件自动/动态计算总数
- 非常厉害的javascript 实现指针式时间
- 组装原有控件实现横向滚动的时间选择器,可滑动 点击,初始状态在指定位置
- js实现时间控件
- javascript实现日历控件(年月日关闭按钮)
- qml实现简单的时间选择控件
- JavaScript实现的可变动态数字键盘控件三种方式