一个很好的日历控件（采用javascript编写）

javascript|控件|日历

 
该日历控件采用js编写，来自MS的 http://expo.live.com，本站整理，希望对大家有用。

本程序中需要的两个图片：
http://expo.live.com/http://www.webjx.com/htmldata/2006-04-04/Images/leftArrow.gif
http://expo.live.com/http://www.webjx.com/htmldata/2006-04-04/Images/rightArrow.gif

Global.css<?XML:NAMESPACE PREFIX = O />


 

td.negDate  a
{
       color: #808080;
}
.calendar
{

       padding-left: 4px;

       padding-right: 4px;

}

.calendar table
{

       border-bottom: solid 1px #366AB3;

       text-align: center;

       padding: 0;

}

.calendar table a
{

       color: black;

}

.calendar td {

       padding: 4px;

       font-size: 8pt;

       font-weight: lighter;

}

.calendarhd
{

       color: #366AB3;

       text-transform: uppercase;

}

.calendarDays
{

       border-bottom: solid 1px;

       color: #808080;

       padding: 0;

       margin: 0;

}

.selectedDate {

      background: orange;

}

.selectedDate a {

       color: white !important;

}

 

Global.js

 

var calendar_DayNames = new Array("日","一","二","三","四","五","六");

var calendar_MonthNames = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

 

function showCalendar(targetID, targetURL, dMonth, dYear, dDay)

{

    if(dMonth < 0)

    {       

        dMonth = 11;

        dYear--;

    }

    if(dMonth > 11)

    {

        dMonth = 0;

        dYear++;

    }

 

    var dNow = new Date();

    if(dDay == 90 && dMonth == dNow.getMonth() && dYear == dNow.getYear()) dDay = dNow.getDate();

    var dCurFD = new Date(dYear, dMonth, 1);

    var dGivenDate = new Date(dYear, dMonth, dDay); 

    var dCurrentMonthFirstSunday = dCurFD.getDay();

    var dCurrentViewDate = new Date(dCurFD);

    var iDays = 0;

    var weekMilliseconds = 1000*60*60*24*7;

    if(dCurrentMonthFirstSunday > 0) iDays = -dCurrentMonthFirstSunday;

   

    var fTrgt = targetURL;

    while (fTrgt.indexOf("'") >= 0) fTrgt = fTrgt.replace("'", "`");

    while (fTrgt.indexOf("`") >= 0) fTrgt = fTrgt.replace("`", "\\'");

   

    var oBuf = '<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">';      

    oBuf += '<TR><TD CLASS="calendarhd"><A HREF="javascript:showCalendar(\'' + targetID + "','" + fTrgt + "'," + (dMonth - 1) + ',' + dYear + ',90);"><img src="http://www.webjx.com/htmldata/2006-04-04/Images/leftArrow.gif" border=0 /></A></TD>';

    oBuf += '<TD COLSPAN="5" CLASS="calendarhd">' + (calendar_MonthNames[dMonth]) + ' ' + dYear + '</TD>';

    oBuf += '<TD CLASS="calendarhd"><A HREF="javascript:showCalendar(\'' + targetID + "','" + fTrgt + "'," + (dMonth + 1) + ',' + dYear + ',90);"><img src="http://www.webjx.com/htmldata/2006-04-04/Images/rightArrow.gif"  border=0 /></A></TD></TR>';

    oBuf += '<TR style="calendarhdrow">';

   

    for(var e=0; e < 7; e++) oBuf += '<TD CLASS="calendarDays">' + calendar_DayNames[e] + '</TD>';         

    oBuf += '</TR>';

 

    var nextMonthFirstDay = new Date(dYear, dMonth+1, 1);

    var IsNextMonthFirstDaySunday = nextMonthFirstDay.getDay()==0;

       

    for(var iRows=0; iRows < 6; iRows++)

    {

        dCurrentMonthDate = new Date(dCurFD.getFullYear(), dCurFD.getMonth(), dCurFD.getDate() + iDays);

        if(1==1)        

        {

        if(iRows==5 && dCurrentMonthDate.getMonth() > dCurFD.getMonth()) continue;       

        if(iRows==5 && IsNextMonthFirstDaySunday) continue;

               

        oBuf += '<TR CLASS="calendarContent">';

        for(var iCols=0; iCols < 7; iCols++)

        {

            dCurrentViewDate = new Date(dCurFD.getFullYear(), dCurFD.getMonth(), dCurFD.getDate() + iDays);

 

            if((dGivenDate.toDateString() == dCurrentViewDate.toDateString()) && (dDay != 90))

            {

                oBuf += '<TD CLASS="selectedDate">';

            }

            else

            {

                if(dCurrentViewDate.getMonth() != dMonth || iDays < 0)

                {

                    oBuf += '<TD CLASS="negDate">';

                }

                else

                {

                    oBuf += '<TD CLASS="posDate">';

                }

            }           

            var args;

           

            if (targetURL.substr(0,11) == 'javascript:')

            {

              args = dCurrentViewDate.valueOf() + ")";

            }

            else

            {

              var sep = targetURL.indexOf('?') < 0 ? '?' : '&';

              args = sep + 'startDate=' + dCurrentViewDate.getFullYear()+ '-' + (dCurrentViewDate.getMonth()+1) + '-' +dCurrentViewDate.getDate() ;

            }

            oBuf += '<A HREF="' + targetURL +  args + '">' + dCurrentViewDate.getDate() + '</A></TD>';

            iDays++;

        }

        oBuf += '</TR>';

        }

    }

    oBuf += '</TABLE>';

    document.getElementById(targetID).innerHTML = oBuf;

}

调用

<LINK href="Global.css" rel="stylesheet">
<script type="text/javascript" src="global.js"></script>


<div id="calendar1" class="calendar"></div>

<script type="text/javascript">

    var dNow = new Date();

    showCalendar('calendar1', FileName.aspx', dNow.getMonth(), dNow.getFullYear(), dNow.getDate())

</script>

时间： 2024-04-10 13:46:25

一个很好的日历控件（采用javascript编写）的相关文章

Android 一个日历控件的实现代码

先看几张动态的效果图吧! 项目地址:https://github.com/Othershe/CalendarView 这里主要记录一下在编写日历控件过程中一些主要的点: 一.主要功能 1.支持农历.节气.常用节假日 2.日期范围设置,默认支持的最大日期范围[1900.1~2049.12] 3.默认选中日期设置 4.单选.多选 5.跳转到指定日期 6.通过自定义属性定制日期外观,以及简单的日期item布局配置 二.基本结构 我们要实现的日历控件采用ViewPager作为主框架,CalendarVi

改造asp.net日历控件为弹出式日期选择控件和GridView呈现长文本字段的两个技巧

asp.net中自带了一个非常不错的日历控件,但在其呈现方式上还是稍有欠缺.现在我们用一个小技巧,可以轻松创建一个弹出式日期.自此你再也不用去网上找那个带了很多脚本代码的JS制作的弹出式日期控件了. 实现,方式很简单:只需在页面中加入一点Javascript和一些CSS,就可以制作一个简单的弹出式日期选择器. 其中,.aspx代码如下: <head id="Head1" runat="server"> <title>无标题页</titl

画图很好用的控件dotnetCHARTIN

最近发现一个很好用的控件 dotnetCHARTING ,画图真的很方便,而且功能很多,可以画各种各样的图 下面介绍一个我写的例子(c#) 1.在的 aspx 也面上添加 chart <div style="text-align:center;"> <dotnetCHARTING:Chart ID="Chart1" runat="server" Height="200px" Width="740px

JavaScript日历控件插件使用详解(支持中文英文繁体)

kimsoft-jscalendar一款优秀的#JavaScript#日历控件,kimsoft-jscalendar.它小巧,单文件:支持多语言:兼容ie6.0+, firefox1.0+, Opera9,其它浏览器未测试:回显选定的时间:Apache license 2.0,商业友好.用 iframe 解决 IE 中层在 select 控件上显示的问题 一.什么是 kimsoft-jscalendar 一个简洁的avaScript日历控件,可在Java Web项目,.NET Web 项目中使用

纯javascript版日历控件_javascript技巧

平时只有下班时间能code,闲来写了个纯javascript版.引用该calendar.js文件,然后给要设置成日历控件的input的id设置成calendar,该input就会变成日历控件. <!doctype html> <html> <head> <meta charset="utf-8"> <title>日历控件</title> <script src="js/calendar.js&quo

求一个日历控件 ，要 jComboBox下实现的！

问题描述 如题:先谢谢啦! 解决方案 解决方案二:给你推荐一个jquery-ui-1.8.7.custom里面有日历插件,各式各样的都有..只不过没试过能不能在jComboBox实现..如果能支持其jquery,就肯定能实现了,呵呵解决方案三:jquery可以在网页上作出日历控件.很好用.JavaScript.解决方案四:引用2楼freeman527的回复: jquery可以在网页上作出日历控件.很好用.JavaScript. 我现在要做的值一个桌面应用程序,可能不太好使吧!解决方案五:Swin

calendar-我在日历控件里的每一天动态生成一个按钮，但是事件不生效是怎么回事

问题描述 我在日历控件里的每一天动态生成一个按钮,但是事件不生效是怎么回事 我在Calendar控件里的每一天动态生成一个LinkButton,显示农历且可以点击,但是Command事件不生效是怎么回事? 这是代码,农历能正常显示,但是LinkButton不能点击 //日的读取 protected void Calendar1_DayRender(object sender, DayRenderEventArgs e) { //农历 LinkButton lbChinaDate = new Li

图片-一个日历控件的问题 用的ligerui 看图！

问题描述 一个日历控件的问题 用的ligerui 看图! 我点结束时间 弹出的框还是在开始时间哪里 真是为什么 解决方案 两个的属性值一样吧,id值name值 解决方案二: 说明你只初始化了开始日期的日期面板,没初始化结束日期的日期面板. 解决方案三: 看一下依附的dom节点id等是否设置的不一样. 解决方案四: 先检查是否初始化,初始化完成之后看看绑定的ID. 解决方案五: 先检查是否初始化,初始化完成之后看看绑定的ID.

GridView点击编辑按钮后，弹出的一个文本框，点击文本框可以显示日历控件

问题描述 我的GridView里有一个时间列,他的<ItemTemplate>模板里放Labe用来显示时间,<EditItemTemplate>模板里放的是一个TextBOx控件,我想在点击编辑按钮的时候啊,时间列里显示出文本框里,点击文本框的时候可以弹出Js的日历控件.不知道这样是不是可以实现,应该怎么做比较好?Html代码.<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="