`
leonardleonard
  • 浏览: 801717 次
社区版块
存档分类
最新评论

asp.net千奇百怪的日历【月儿原创】

阅读更多

asp.net千奇百怪的日历

作者:清清月儿

主页:http://blog.csdn.net/21aspnet/           时间:2007.5.14

日历控件是我们经常使用的,本文把常用的几款日历总结如下。 

1.下拉日历梅花雨版第1款
点评:
最经典的几乎完美了。

代码:

<%...@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>


<html  >
<head runat="server">
    
<title>日历控件</title>
<script type="text/javascript" src="calendar.js"></script>
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
        
<input id="Text1" type="text"  onFocus=calendar() />
       
</div>
    
</form>
</body>
</html>


<!--
document.write(
"<div id=meizzCalendarLayer style='position: absolute; z-index: 9999; width: 144; height: 193; display: none'>");
document.write(
"<iframe name=meizzCalendarIframe scrolling=no frameborder=0 width=100% height=100%></iframe></div>");
function writeIframe()
...{
    
var strIframe = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'><style>"+
    
"*{font-size: 12px; font-family: 宋体}"+
    
".bg{  color: "+ WebCalendar.lightColor +"; cursor: default; background-color: "+ WebCalendar.darkColor +";}"+
    
"table#tableMain{ width: 142; height: 180;}"+
    
"table#tableWeek td{ color: "+ WebCalendar.lightColor +";}"+
    
"table#tableDay  td{ font-weight: bold;}"+
    
"td#meizzYearHead, td#meizzYearMonth{color: "+ parent.WebCalendar.wordColor +"}"+
    
".out { text-align: center; border-top: 1px solid "+ WebCalendar.DarkBorder +"; border-left: 1px solid "+ WebCalendar.DarkBorder +";"+
    
"border-right: 1px solid "+ WebCalendar.lightColor +"; border-bottom: 1px solid "+ WebCalendar.lightColor +";}"+
    
".over{ text-align: center; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF;"+
    
"border-bottom: 1px solid "+ WebCalendar.DarkBorder +"; border-right: 1px solid "+ WebCalendar.DarkBorder +"}"+
    
"input{ border: 1px solid "+ WebCalendar.darkColor +"; padding-top: 1px; height: 18; cursor: hand;"+
    
"       color:"+ WebCalendar.wordColor +"; background-color: "+ WebCalendar.btnBgColor +"}"+
    
"</style></head><body onselectstart='return false' style='margin: 0px' oncontextmenu='return false'><form name=meizz>";
    
if (WebCalendar.drag)...{ strIframe += "<scr"+"ipt language=javascript>"+
    
"var drag=false, cx=0, cy=0, o = parent.WebCalendar.calendar; function document.onmousemove(){"+
    
"if(parent.WebCalendar.drag && drag){if(o.style.left=='')o.style.left=0; if(o.style.top=='')o.style.top=0;"+
    
"o.style.left = parseInt(o.style.left) + window.event.clientX-cx;"+
    
"o.style.top  = parseInt(o.style.top)  + window.event.clientY-cy;}}"+
    
"function document.onkeydown(){ switch(window.event.keyCode){  case 27 : parent.hiddenCalendar(); break;"+
    
"case 37 : parent.prevM(); break; case 38 : parent.prevY(); break; case 39 : parent.nextM(); break; case 40 : parent.nextY(); break;"+
    
"case 84 : document.forms[0].today.click(); break;} window.event.keyCode = 0; window.event.returnValue= false;}"+
    
"function dragStart(){cx=window.event.clientX; cy=window.event.clientY; drag=true;}</scr"+"ipt>"}

    strIframe 
+= "<select name=tmpYearSelect  onblur='parent.hiddenSelect(this)' style='z-index:1;position:absolute;top:3;left:18;display:none'"+
    
" onchange='parent.WebCalendar.thisYear =this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
    
"<select name=tmpMonthSelect onblur='parent.hiddenSelect(this)' style='z-index:1; position:absolute;top:3;left:74;display:none'"+
    
" onchange='parent.WebCalendar.thisMonth=this.value; parent.hiddenSelect(this); parent.writeCalendar();'></select>"+
    
"<table id=tableMain class=bg border=0 cellspacing=2 cellpadding=0>"+
    
"<tr><td width=140 height=19 bgcolor='"+ WebCalendar.lightColor +"'>"+
    
"    <table width=140 id=tableHead border=0 cellspacing=1 cellpadding=0><tr align=center>"+
    
"    <td width=15 height=19 class=bg title='向前翻 1 月&#13;快捷键:←' style='cursor: hand' onclick='parent.prevM()'><b>&lt;</b></td>"+
    
"    <td width=60 id=meizzYearHead  title='点击此处选择年份' onclick='parent.funYearSelect(parseInt(this.innerText, 10))'"+
    
"        onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
    
"        onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
    
"    <td width=50 id=meizzYearMonth title='点击此处选择月份' onclick='parent.funMonthSelect(parseInt(this.innerText, 10))'"+
    
"        onmouseover='this.bgColor=parent.WebCalendar.darkColor; this.style.color=parent.WebCalendar.lightColor'"+
    
"        onmouseout='this.bgColor=parent.WebCalendar.lightColor; this.style.color=parent.WebCalendar.wordColor'></td>"+
    
"    <td width=15 class=bg title='向后翻 1 月&#13;快捷键:→' onclick='parent.nextM()' style='cursor: hand'><b>&gt;</b></td></tr></table>"+
    
"</td></tr><tr><td height=20><table id=tableWeek border=1 width=140 cellpadding=0 cellspacing=0 ";
    
if(WebCalendar.drag)...{strIframe += "onmousedown='dragStart()' onmouseup='drag=false' onmouseout='drag=false'";}
    strIframe 
+= " borderColorLight='"+ WebCalendar.darkColor +"' borderColorDark='"+ WebCalendar.lightColor +"'>"+
    
"    <tr align=center><td height=20>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></table>"+
    
"</td></tr><tr><td valign=top width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
    
"    <table id=tableDay height=120 width=140 border=0 cellspacing=1 cellpadding=0>";
         
for(var x=0; x<5; x++)...{ strIframe += "<tr>";
         
for(var y=0; y<7; y++)  strIframe += "<td class=out id='meizzDay"+ (x*7+y) +"'></td>"; strIframe += "</tr>";}

         strIframe 
+= "<tr>";
         
for(var x=35; x<39; x++) strIframe += "<td class=out id='meizzDay"+ x +"'></td>";
         strIframe 
+="<td colspan=3 class=out title='"+ WebCalendar.regInfo +"'><input style=' background-color: "+
         WebCalendar.btnBgColor 
+";cursor: hand; padding-top: 4px; width: 100%; height: 100%; border: 0' onfocus='this.blur()'"+
         
" type=button value='&nbsp; &nbsp; 关闭' onclick='parent.hiddenCalendar()'></td></tr></table>"+
    
"</td></tr><tr><td height=20 width=140 bgcolor='"+ WebCalendar.lightColor +"'>"+
    
"    <table border=0 cellpadding=1 cellspacing=0 width=140>"+
    
"    <tr><td><input name=prevYear title='向前翻 1 年&#13;快捷键:↑' onclick='parent.prevY()' type=button value='&lt;&lt;'"+
    
"    onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==1000)'><input"+
    
"    onfocus='this.blur()' name=prevMonth title='向前翻 1 月&#13;快捷键:←' onclick='parent.prevM()' type=button value='&lt;&nbsp;'>"+
    
"    </td><td align=center><input name=today type=button value='Today' onfocus='this.blur()' style='width: 50' title='当前日期&#13;快捷键:T'"+
    
"    onclick="parent.returnDate(new Date().getDate() +'/'+ (new Date().getMonth() +1) +'/'+ new Date().getFullYear())">"+
    
"    </td><td align=right><input title='向后翻 1 月&#13;快捷键:→' name=nextMonth onclick='parent.nextM()' type=button value='&nbsp;&gt;'"+
    
"    onfocus='this.blur()'><input name=nextYear title='向后翻 1 年&#13;快捷键:↓' onclick='parent.nextY()' type=button value='&gt;&gt;'"+
    
"    onfocus='this.blur()' style='meizz:expression(this.disabled=parent.WebCalendar.thisYear==9999)'></td></tr></table>"+
    
"</td></tr><table></form></body></html>";
    
with(WebCalendar.iframe)
    
...{
        document.writeln(strIframe); document.close();
        
for(var i=0; i<39; i++)
        
...{
            WebCalendar.dayObj[i] 
= eval("meizzDay"+ i);
            WebCalendar.dayObj[i].onmouseover 
= dayMouseOver;
            WebCalendar.dayObj[i].onmouseout  
= dayMouseOut;
            WebCalendar.dayObj[i].onclick     
= returnDate;
        }

    }

}

function WebCalendar() //初始化日历的设置
...{
    
this.regInfo    = "关闭的快捷键:[Esc]";
    
this.daysMonth  = new Array(312831303130313130313031);
    
this.day        = new Array(39);            //定义日历展示用的数组
    this.dayObj     = new Array(39);            //定义日期展示控件数组
    this.dateStyle  = null;                     //保存格式化后日期数组
    this.objExport  = null;                     //日历回传的显示控件

    
this.eventSrc   = null;                     //日历显示的触发控件

    
this.inputDate  = null;                     //转化外的输入的日期(d/m/yyyy)
    this.thisYear &
分享到:
评论

相关推荐

    ASP.net调用日历控件

    在ASP.NET中,日历控件(Calendar Control)是一个非常常用的UI组件,它允许用户以图形化的方式选择日期。在本教程中,我们将探讨如何在ASP.NET应用中调用日历控件,并将所选日期赋值给一个文本框。 首先,让我们...

    asp.net 个性日历

    在这个"asp.net 个性日历"项目中,我们关注的是如何利用ASP.NET技术来创建一个具备日历记事本功能且界面个性化的Web应用组件。 在ASP.NET中,我们可以使用多种方式来实现日历功能,包括但不限于使用内置的Web控件、...

    ASP.NET 自定义日历控件

    在ASP.NET中,自定义日历控件是一个常见的需求,特别是在构建交互式Web应用程序时,用户经常需要输入日期。为了提供便捷的用户体验,开发者通常会将日历功能集成到TextBox中,使得用户可以通过点击文本框触发一个...

    asp.net 日历控件

    ASP.NET日历控件是.NET框架中用于网页交互的一个重要组件,它允许用户方便地进行日期选择,常用于在线表单、事件安排等场景。在本文中,我们将深入探讨这个控件的功能、配置以及如何利用C#源码实现示例。 首先,ASP...

    ASP.NET制作记事日历

    在本项目"ASP.NET制作记事日历"中,开发者使用了C#编程语言来实现一个功能丰富的在线日历,帮助用户以电子书的形式存储和管理日常事务。 首先,我们要理解ASP.NET的工作原理。它通过编译式的模型处理HTTP请求,这...

    asp.net之日历主题的变换

    在ASP.NET中,日历控件是用于展示日期选择的一种常用组件,它的外观和功能可以通过主题进行定制。本文将深入探讨如何在ASP.NET中实现日历主题的变换,以达到改变用户界面风格的效果。 首先,我们需要理解什么是主题...

    ASP.NET日历控件

    ASP.NET日历控件是微软开发的Web应用程序框架ASP.NET中的一个重要组成部分,它允许开发者在网页上创建交互式的日期选择功能。这个控件是基于服务器的,因此可以在服务器端进行处理,并能通过HTTP协议将结果传送到...

    Asp.net 日历 Calendar

    Asp.NET日历控件(Calendar)是ASP.NET Web Forms框架中的一个常用组件,用于在网页上展示日期选择器,用户可以通过它方便地选择日期。这个控件在Web应用程序中非常常见,尤其在处理日期输入或者事件调度时。在本文...

    asp.net日历

    ASP.NET日历组件是.NET框架中用于在网页上展示日期选择功能的重要控件。它提供了一个用户友好的界面,让用户可以方便地查看和选择日期,常用于事件安排、预约系统或者任何形式的时间相关输入。在ASP.NET中,日历控件...

    ASP.NET日历控件.

    ASP.NET日历控件是微软开发的Web应用程序框架ASP.NET中的一个重要组件,它允许开发者在网页上添加交互式日期选择功能。这个控件为用户提供了一个直观的、易于使用的界面,用户可以通过点击或导航来选择日期,非常...

    asp.net web日历控件源码

    ASP.NET Web 日历控件是开发Web应用程序时常用的一种组件,尤其在构建具有日期选择功能的界面时。本文将深入探讨“asp.net web日历控件源码”,介绍其工作原理、使用方法以及如何通过源码进行自定义扩展。 首先,...

    asp.net日历控件

    ASP.NET中的日历控件是Web开发中常用的一个组件,它允许用户以直观的日历形式选择日期,大大提升了用户体验。这个控件是.NET框架的一部分,适用于构建动态网站和Web应用程序。在ASP.NET中,我们可以利用Visual ...

    ASP.NET的日历控件,超好用,DLL加载

    今天我们将深入探讨ASP.NET日历控件以及与之相关的DLL加载。 日历控件在ASP.NET中的应用广泛,它提供了直观的日期选择方式,可以轻松集成到网页中,为用户提供了友好的界面。控件通常包含一个月份和日期的选择区域...

    Asp.net 个性化日历控件代码示例

    在ASP.NET中,日历控件(Calendar)是一种常用的用户界面元素,用于显示日期并允许用户选择特定日期。个性化日历控件则是开发者为了提供更丰富、更具特色的用户体验而进行的自定义设计。本示例将详细介绍如何在ASP...

    asp.net 日历选择

    在ASP.NET中,日历控件(Calendar)是一个常用的用户界面元素,它允许用户通过图形化界面选择日期,常用于日期输入场景,如预订系统、日程安排等。本篇文章将深入探讨ASP.NET日历选择的相关知识点。 1. **日历控件...

    ASP.NET 日历控件使用实例 6个案例

    在ASP.NET 中,日历控件(Calendar Control)是一个非常实用的组件,它允许用户通过直观的日历界面来选择日期,常见于需要日期输入的场景,如事件安排、预约系统等。本篇文章将深入探讨六个ASP.NET 日历控件的使用...

    整理的日历,asp.net日历,日历控件

    在ASP.NET中,日历控件(Calendar Control)是一个非常重要的UI组件,它允许用户以交互的方式选择日期,常用于事件计划、约会管理等场景。本压缩包包含了一系列关于ASP.NET日历控件的资源,总计约10个,帮助开发者在...

    基于ASP.NET +SQLSERVER 的教学日历管理系统 附课程设计报告

    《基于ASP.NET + SQLSERVER的教学日历管理系统及课程设计报告》 在信息技术高速发展的今天,教学管理系统的构建已经成为教育领域的重要课题。本项目是大二学生独立完成的一个实践案例,虽然作者自评其报告写作不够...

Global site tag (gtag.js) - Google Analytics