`

日期选择示例javascript代码

阅读更多
转载:
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=1900;
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;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";  
}

页面代码:

<script language="javascript" src="calendar.js"></script>//导入calendar.js文件

<script language="javascript">
    var oCalendarChs=new PopupCalendar("oCalendarChs");      //初始化控件时,请给出实例名称:oCalendarChs
    oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六");
    oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
    oCalendarChs.oBtnTodayTitle="今天";
    oCalendarChs.oBtnCancelTitle="取消";
    oCalendarChs.Init();
    </script>

生日 : <input name="birthday" type="text" onfocus="getDateString(this,oCalendarChs)" readonly="readonly" />


分享到:
评论

相关推荐

    javascript实现的日期选择器

    `THUMBS.DB` 是一个图片预览数据库文件,通常在Windows系统中用于存储文件夹中的缩略图,可能与日期选择器的界面设计有关,包含了图标或示例图像。 `CALENDAR.HTM` 可能是一个HTML文件,展示日期选择器的样式和布局...

    利用css+javascript实现的一个日期选择器代码

    - 将选定的日期同步到HTML元素,供服务器端或后续的JavaScript代码使用。 - 可能还包括一些自定义的事件,如改变日期时触发的回调函数。 总的来说,这个项目提供了一个实用的日期选择器实现,结合了CSS和...

    javascript实现日期时间动态显示示例代码

    在JavaScript代码中,我们使用了`document.write()`方法来输出一个包含时间显示的`&lt;span&gt;`元素。这个元素被赋予一个id,以便后续通过JavaScript操作它。 接下来,我们使用了`setInterval()`函数,这是一个定时执行...

    一个网页日期选择示例

    在这个例子中,我们引入了jQuery UI的相关资源,并通过JavaScript代码将`#datepicker`这个ID所对应的输入框转化为日期选择器。 日期选择器的实现还需要考虑辅助功能,确保视障用户或使用屏幕阅读器的用户也能顺利...

    javascript 表单日期选择

    本篇文章将深入探讨如何使用JavaScript进行表单日期选择,并提供相关实践示例。 1. HTML5日期输入类型: HTML5引入了新的输入类型,如`&lt;input type="date"&gt;`,它会在支持的浏览器中生成一个内置的日期选择器。例如...

    js日期选择代码.zip

    在JavaScript(简称JS)中,处理日期和时间是一项常见的任务,尤其在网页应用中,日期选择器是一个必备的交互元素。"js日期选择代码.zip"这个压缩包很可能包含了一个或多个实现这一功能的代码文件。从描述来看,这些...

    JavaScript日期控件02(日期选择器)

    5. **示例代码**:博客中应该会有具体的JavaScript代码片段,展示如何实例化Date对象,处理用户的输入,以及更新HTML元素来显示所选日期。 6. **功能扩展**:博主可能还会讨论如何添加更多高级功能,如禁用特定日期...

    jQuery移动端日期选择代码.zip

    而“jiaoben6578”可能是一个示例文件或者包含插件主要代码的JavaScript文件,开发者可以通过查看和运行这个文件来了解插件的工作原理。 为了在项目中使用这个插件,开发者需要先引入jQuery库,然后加载该日期选择...

    JavaScript示例大全,JavaScript,JavaScript示例

    在控制流程方面,JavaScript有if...else语句进行条件判断,for、while循环用于重复执行代码,以及switch语句作为多分支选择。此外,函数式编程的概念也体现在JavaScript中,如高阶函数、闭包和箭头函数,这些都是...

    时间日期JavaScript 选择时间日期

    这个压缩包文件的标题“时间日期JavaScript选择时间日期”表明它包含了一系列用于在网页上实现日期和时间选择功能的JavaScript代码片段或库。这些资源可能是开发者个人整理并珍藏的经典示例,可以帮助我们更好地理解...

    mobiscroll select选择, year选择, date选择, time选择示例完整代码

    在"mobiscroll select选择, year选择, date选择, time选择示例完整代码"中,我们可以深入理解如何利用Mobiscroll实现这些功能。 首先,`select选择`是Mobiscroll的一个关键特性,它允许开发者创建具有美观样式和...

    js calendar橙色日期选择器代码.zip

    JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和...这种类型的代码示例对于学习和理解JavaScript日期选择器的实现非常有帮助,同时也可作为自定义日期选择器的一个起点,根据实际需求进行修改和扩展。

    漂亮JavaScript弹出选择日期控件

    1. **初始化**:在页面加载完成后,JavaScript代码会找到相关的HTML元素,然后对其进行增强,将其转换为日期选择控件。 2. **样式设计**:为了使控件看起来更美观,开发者可能会使用CSS来定义日期选择器的样式,...

    日期控件javascript代码

    JavaScript 日期控件是网页开发中常用的一种交互元素,它允许用户方便地选择日期,常用于表单输入。本示例提供了三个不同的日期控件实现,每个控件都有相应的显示效果图片,可以直接复制代码到项目中使用。 核心...

    javascript日期选择器

    这里提供一个简单的日期选择器的HTML和JavaScript代码示例: ```html &lt;!DOCTYPE html&gt; .date-picker { position: relative; } .date-picker .calendar { display: none; position: absolute; top: 30...

    javascript实现日期选择

    ### JavaScript 实现日期选择 #### 知识点概述 本文将详细介绍如何利用JavaScript来实现一个功能强大的日期选择器。此日期选择器不仅包含了基础的日期显示功能,还提供了丰富的自定义选项,例如添加指定时间间隔、...

    javascript经典效果示例

    12. **模块化**:使用CommonJS、AMD或ES6的模块系统(import/export),可以组织和管理JavaScript代码,使其更易于维护和复用。 以上只是JavaScript在网页效果中的一部分应用场景,实际的“javascript经典效果示例...

    javascript代码大全

    通过学习和实践“JavaScript代码大全”中的各种示例和特效代码,开发者不仅可以深化对JavaScript的理解,还能提升实际项目开发的能力。无论你是初学者还是经验丰富的开发者,这个资源都能提供宝贵的学习材料。

    超级好用的日期验证代码JAVASCRIPT

    根据给定的文件信息,我们可以总结出以下关于“超级好用的日期验证代码JAVASCRIPT”的详细知识点: ### 1. **日期格式验证的重要性** 在处理用户输入或数据库存储时,日期验证是非常关键的一步。错误的日期格式...

    js日期时间选择器代码.zip

    【标题】"js日期时间选择器代码.zip"是一款基于JavaScript实现的日期时间选择器,它提供了用户友好的界面,使得在网页中选择日期和时间变得简单直观。此代码利用了JavaScript的强大功能,结合了CSS样式以提升用户...

Global site tag (gtag.js) - Google Analytics