HTML日期控件修改版

最新推荐文章于 2024-11-14 00:00:11 发布

edmond80

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量5.4k

点赞数

分类专栏： HTML 文章标签： html function date button border javascript

本文链接：https://blog.csdn.net/edmond80/article/details/1542525

版权

本文介绍了对Chris.J的日期控件进行的改进，解决了日期界面无法正确显示今天日期及遮挡问题。修复了日期界面中‘Today’按钮的失效和界面覆盖其他元素的问题，并提供了修改后的源码。

摘要由CSDN通过智能技术生成

Chris.J的日期控件是个很好的东东，不过我使用的时候发觉有几个缺憾，不知道是我下载的版本问题还是代码本身就是这样的。

问题如下：
1、日期界面展开后，点“Today”无法获得当天的日期，而且界面无法关闭；
2、日期界面展开后，如果界面下有select之类的控件，则这些控件不会被遮住（看起来不大好看）。

基于以上原因，我对Chris.J的代码做了点修改，解决了上述的问题。源码如下：

//★                                                              ★
//★ 日期控件 Version 1.1                                   ★
//★                                                              ★
//★ Code by Chris.J(黄嘉隆)                                 ★
//★ Update by Edmond.Y(印洁)                                   ★
//★                                                              ★
//★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

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";
this.sIFRAMEID=InstanceName+"_IFrame";//Edmond

}
function CalendarInit() ///Create panel
{
var sMonth,sYear
sMonth=this.currDate.getMonth();
sYear=this.currDate.getYear();
htmlAll=""
htmlAll+="<iframe id='"+this.sIFRAMEID+"' src='javascript:false;' scrolling='no' frameborder='0' style='position:absolute;width:"+this.Width+";display:none;'></iframe>";//Edmond
htmlAll+="<div id='"+this.sDIVID+"' style='display:none;position:absolute;width:"+this.Width+";border:&