asp.net日期控件，简单好用

最新推荐文章于 2018-09-25 20:10:00 发布
最新推荐文章于 2018-09-25 20:10:00 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： ASP.NET 文章标签： asp.net function date button border div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drr789/article/details/7970445
版权 
html代码：
<html>
<head>
<title>时间控件</title>
<script language="javascript" src="PopupCalendar.js"></script>
</head>
<body>
<script>   
var oCalendarChs=new PopupCalendar("oCalendarChs"); //初始化控件时,请给出实例名称:oCalendarChs   
oCalendarChs.weekDaySting=new Array("日","一","二","三","四","五","六");   
oCalendarChs.monthSting=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");   
oCalendarChs.oBtnTodayTitle="今天";   
oCalendarChs.oBtnCancelTitle="取消";   
oCalendarChs.Init();   
</script>
<br>
 开始时间<input readonly type="text" name="dd" id="Text1" οnclick="getDateString(this,oCalendarChs)" value=" ">
</body>
</html>

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=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+"' οnchange=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+"' οnchange=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+=" οnmοuseοver=CalendarCellsMsOver("+this.instanceName+")";   
                htmloDayTable+=" οnmοuseοut=CalendarCellsMsOut("+this.instanceName+")";   
                htmloDayTable+=" οnclick=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='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"  
    htmloButton+=" οnclick=CalendarTodayClick("+this.instanceName+")>"+this.oBtnTodayTitle+"</button> "  
    htmloButton+="<button style='width:40%;border:1px solid #BCD0DE;background-color:#eeeeee;cursor:hand'"  
    htmloButton+=" οnclick=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";          
}

效果图：

下载链接：demo

lxbgg
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js时间控件
01-08
js时间控件，包括各种类型的时间显示，此控件简单粗暴而且主要的，功能强。
九头鸭ASP.NET日期控件
03-17
在这个特定的场景中，我们关注的是一个名为"九头鸭ASP.NET日期控件"的组件。这个控件是为了在网页上方便用户选择日期而设计的，它为用户界面添加了互动性和用户体验。 日期控件是Web开发中的常见元素，尤其在处理...
JavaScript实现的日期控件
05-17 46
JavaScript实现的日期控件 它还会读取当前的时间 &lt;html&gt; &lt;head&gt; &lt;style&gt; &lt;!-- .wr{font-size: 12pt; line-height: 22px} .wr1 { FONT-SIZE: 12px; LINE-HEIGHT: 200%} .wr2 { FONT-SIZE: 14px; LINE-HEIGH...
ASP.NET日期控件
weixin_33912445的博客
09-25 391
ASP.NET 使用My97DatePicker日期控件 首先要下载该控件的包，下载地址：http://pan.baidu.com/s/1Aa5gk 引用文件 <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script> 目录详情 常规调用...
C# ASP.NET 时间控件_日期时间选择输入框控件。
04-21
习惯了C# WinForm上使用DateTimePicker，在ASP.NET开发页面时，发现最简单的日期时间输入选择框居然没有现成的控件，很有束手无策的感觉。网上找了很多，除了牛人自己写控件外，大多数都是使用My97DatePicker这个第...
Asp.net下拉日期控件源码及示例
03-16
摘要:.NET源码,控件组件,日历控件　下拉日期控件源码及示例，日期选择控件，方便让用户输入日期时间，你只需在时间框内点击一下鼠标，日期选择器就会显示出来，选择日期后确认即可。一个常用的下拉日期控件的演示...
Asp.net下拉日期控件源码及演示.zip
06-18
在Asp.net开发环境中，经常会遇到需要用户输入日期的情况，这时下拉日期控件就显得尤为重要。本资源“Asp.net下拉日期控件源码及演示”提供了一个方便、直观且可自定义的日期选择解决方案，适用于各种Web应用程序。 ...
ASP.NET c# 日期控件
08-04
ASP.NET c# 日期控件，很好用，测试通过 下载后解压放到站点文件夹下，引用时注意路径 前台： <title></title> <script language="javascript" type="text/javascript" src="../My97DatePicker/WdatePicker.js">...
一个不错的js时间日期控件
04-24
不错啊。你们看看，自己下了就知道了，0分 自己下了看看反正不要分的，一个js控件蛮好的，js里面自带提示如何操作
非常好用的asp.net日期时间控件
11-01
1. 简介 功能强大、使用方便的日期时间控件，目前的版本是:4.1 正式版 发布于2008-10-20 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途: WdatePicker.js 配置文件,在调用的地方仅需使用该文件 config.js 语言和皮肤配置文件 calendar.js 日期库主文件) My97DatePicker.htm 临时页面文件,不可删除 目录lang 存放语言文件 目录skin 存放皮肤的相关文件 当WdatePicker.js里的属性:$wdate=true时,在input里加上class="Wdate"就会在选择框右边出现日期图标,如果您不喜欢这个样式,可以把class="Wdate"去掉,另外也可以通过修改skin目录下的WdatePicker.css文件来修改样式
asp.net日期选择控件
03-19
asp.net日期选择控件,不用再手动不回日期了,使用方便
日期 时间js控件
01-21
代码如下:[removed] /**//** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 <input type=”text” name=”date” readOnly onClick=”setDay(this);”> * (2)选择日期和小时 <input type=”text” name=”dateh” readOnly onClick=”setDayH(this);”>
JS日期时间选择控件
08-31
日期时间选择控件特点： 1. 支持firefox，ie等主流浏览器； 2. 支持多语言； 3. 支持动画效果(firefox 效果更加佳)； 4. 支持日期，时间，时间戳选择。 5. 支持键盘操作
ASP.NET 使用My97DatePicker日期控件
weixin_30478923的博客
12-13 212
首先要下载该控件的包，下载地址：http://pan.baidu.com/s/1Aa5gk 引用文件 <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script> 目录详情 常规调用 <input id="d11" type="text" clas...
js时间控件（年月日时分秒）
shylhd的专栏
09-01 808
这部分是时间控件的的js代码，NewTime.js       var bMoveable=true;var strFrame;  document.writeln('&lt;iframe id=endDateLayer frameborder=0 width=162 height=211 style="position: absolute;  z-index: 9998; displ...
Javascript 日期 时间 选择控件
diaomiya1446的博客
06-07 283
Javascript 日期 时间 选择控件 本文源出处: http://wf5360308.cnblogs.com/articles/362935.html对显示风格进行了一些修改. 1/**//**2*本日历选择控件由tiannet根据前人经验完善而得...
ASP.NET 2.0 控件与登录验证模块详解
"ASP.NET控件及其配置" ASP.NET控件是.NET Framework中用于构建动态Web应用程序的核心组件。这些控件提供了丰富的功能，使得开发者能够快速地构建交互式的用户界面。在ASP.NET 2.0中，引入了一系列常用服务器控件，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值