`

JavaScript日期控件01（日期选择器）

JavaScriptJ#CSSXHTMLF# 
阅读更多
PopupCalendar.htm页面显示效果如下：

[img]http://fantasyyong840205.iteye.com/upload/picture/pic/8128/3a23e497-53f7-3a80-929f-0059067fe2e1.jpg [/img] 

<HTML>
<HEAD>
<TITLE></TITLE>
<script language="javascript" src="PopupCalendar.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>


PopupCalendar.js文件： 

//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
//★                                                              ★
//★ 日期控件 Version 1.0                                         ★
//★                                                              ★
//★ Code by Chris.J(黄嘉隆)                                      ★
//★                                                              ★
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

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=2099;
	///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;width:"+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='width: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='width: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+="&nbsp;</td>"
			}
		}
		htmloDayTable+="</tr>";	
	}
	htmloDayTable+="</tbody></table>";
	/// Today Button
	htmloButton="<div align='center' style='padding:3px'>"
	htmloButton+="<button id='"+this.sTODAYBTNID+"' style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"
	htmloButton+=" onclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button>&nbsp;"
	htmloButton+="<button style='width: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="&nbsp;";
		}
	}	
}
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";		
}
分享到：
| Liferay中日历组件的使用
评论
2 楼 aarron84 2008-11-26  
对XHTML 1.0 支持不是太好
1 楼 leonardleonard 2008-04-24  
好像当选择1999年12月的时候，日期会不对，楼主可以看看。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript日期控件02（日期选择器）

    这篇博客“JavaScript日期控件02（日期选择器）”可能是博主FantasyYong分享的一个关于自定义日期选择器的实现方法。日期控件在网页表单、事件预订、日程管理等场景中广泛应用，为用户提供友好的界面体验。 在...

    日期控件 javascript日期控件

    因此，开发者通常会利用JavaScript和CSS创建自定义的日期选择器。这些控件通过监听用户的交互事件（如点击、滑动），动态生成并显示日期选择界面，然后更新与控件关联的输入框值。 二、JavaScript日期控件的使用...

    javascript 日期控件

    例如，当用户点击日期选择器时，一个弹出的日历视图可能会被显示出来，用户可以选择一个日期，然后JavaScript会更新HTML页面上的日期显示。 在JavaScript中，可以使用`new Date()`创建一个新的日期对象，或者使用`...

    JavaScript日期控件(日期选择器)，很不错的，使用方便。

    JavaScript日期选择器通过提供可视化界面，使用户可以方便地通过日历样式选择日期，大大提升了用户体验。 日期控件的核心是JavaScript的Date对象，它提供了处理日期和时间的各种方法和属性。例如，`new Date()`用于...

    漂亮JavaScript弹出选择日期控件

    3. **事件处理**：当用户与日期控件交互时，如点击按钮，JavaScript会捕获这些事件并执行相应的操作，如弹出或关闭日期选择器，更新输入框的值等。 4. **日期逻辑**：日期选择器需要处理日期的合法性检查，例如确保...

    JavaScript经典日期控件

    JavaScript经典日期控件，如标题所述，是一种基于JavaScript编写的用于网页交互的日期选择组件，它使得用户在网页上能够方便地选取日期。这个控件的版本为My97DatePicker3.0.1，通常这类控件会提供丰富的功能和良好...

    兼容多种IE的javascript日期控件

    此外，可能还会有对CSS和DOM操作的部分，以构建和控制日期选择器的视觉展示。 总结来说，这个主题涵盖的知识点包括：JavaScript日期控件的实现、跨浏览器兼容性策略、事件处理、HTML与JavaScript的交互、以及可能...

    vue日期选择器控件

    本篇将深入探讨"vue日期选择器控件"的相关知识点。 1. **Vue.js 组件系统** Vue的核心特性之一就是组件化开发，它允许我们将UI拆分成可复用的模块。日期选择器控件就是一个典型的组件示例，可以独立于其他代码复用...

    JavaScript日期控件集合

    本资源包“JavaScript日期控件集合”包含了一系列多语言支持的日期选择器，旨在满足不同项目需求。 1. **多语言支持**：这些日期控件通常内置了多种语言的本地化设置，允许开发者根据用户的浏览器设置或手动配置，...

    javascript 日期控件带时间

    JavaScript 日期控件是网页开发中常用的一种交互元素，它允许用户方便地选择日期和时间。在JavaScript中，处理日期和时间主要依赖于内置的`Date`对象。本篇文章将详细探讨如何创建一个带有时间选择功能的JavaScript...

    js（javascript） 日期控件

    3. **日期选择器库**：在实际开发中，为了提供更好的用户体验，开发者通常会使用现成的日期选择器库，如`jQuery UI Datepicker`、`bootstrap-datepicker`、`Pickadate.js`或`Flatpickr`等。这些库提供了丰富的配置...

    javascript日期控件兼容FireFox修改版（二）

    3. **自定义日期选择器**：当内置日期输入不适用时，可以创建自定义的日期选择器。这通常涉及到JavaScript事件处理、DOM操作和可能的CSS动画。确保在Firefox中正确显示和交互，需要测试并调整这些元素。 4. **Fire...

    javascript日期控件二

    1. **创建控件**：开发者可以使用HTML和CSS创建日期选择器的基本结构，然后用JavaScript进行功能的添加。这可能涉及到事件监听（如点击、改变等）、DOM操作（添加、删除、修改元素）以及样式控制。 2. **日期处理**...

    美观的javascript日期控件

    1. **jQuery UI Datepicker**：这是基于jQuery库的日期选择器，提供了丰富的主题和自定义选项，可以轻松集成到.NET项目中。 2. **Bootstrap Datepicker**：它是Bootstrap框架的一个组件，具有良好的响应式设计，...

    javascript日期控件源码

    JavaScript日期控件源码是一种常见的前端开发工具，用于在网页上提供用户友好的日期选择功能。这个控件通常是一个文本框，用户可以点击后弹出一个日历界面，方便地选择日期，而不是手动输入。这样的控件对于需要处理...

    JavaScript日期控件四个

    虽然它本身并不提供日期选择器，但它可以与许多第三方插件（如eonasdan/bootstrap-datetimepicker）结合使用，创建出强大的日期和时间选择控件。这种组合提供了丰富的日期和时间处理能力，包括时间区支持、日期运算...

Magicbox
Global site tag (gtag.js) - Google Analytics