日历控件

<%@page contentType="text/html;charset=utf-8"%>

<html>
    <head>
        <title>日历</title>
    </head>
   
<script type="text/javascript" >
   
function DateSelector(selyear, selmonth, selday)
{
    this.selyear = selyear;
    this.selmonth = selmonth;
    this.selday = selday;
    this.selyear.Group = this;
    this.selmonth.Group = this;
   
    if (arguments.length == 4)          // 如果传入参数个数为4,最后一个参数必须为Date对象
    {
        this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
    }
    else if (arguments.length == 6)     // 如果传入参数个数为6,最后三个参数必须为初始的年月日数值
    {
        this.InitSelector(arguments[3], arguments[4], arguments[5]);
    }
    else                               // 默认使用当前日期
    {
        var dt = new Date();
        this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
    }
   
    // 给年份、月份下拉菜单添加处理onchange事件的函数
    if (window.document.all != null) // IE
    {
        this.selyear.attachEvent("onchange", DateSelector.Onchange);
        this.selmonth.attachEvent("onchange", DateSelector.Onchange);
    }
    else // Firefox
    {
        this.selyear.addEventListener("change", DateSelector.Onchange, false);
        this.selmonth.addEventListener("change", DateSelector.Onchange, false);
    }
   
}
    // 根据参数初始化下拉菜单选项
    DateSelector.prototype.InitSelector = function(year, month, day)
    {
        // 由于外部是可以调用这个方法,因此我们在这里也要将selYear和selMonth的选项清空掉
        // 另外因为InitDaySelect方法已经有清空天数下拉菜单,因此这里就不用重复工作了
        this.selyear.options.length = 0;
        this.selmonth.options.length = 0;
       
        //初始化年月
        this.InitYearSelect();
        this.InitMonthSelect();
       
        //初始化年月默认值
        this.selyear.selectedIndex = this.MaxYear - year;
        this.selmonth.selectedIndex = month - 1;
       
        // 初始化天数
        this.InitDaySelect();
    }
   
    //增加一个最大年份的属性
    DateSelector.prototype.MaxYear = (new Date()).getFullYear();
   
    //增加一个最小年份的属性
    DateSelector.prototype.MinYear = 1900;
   
    //初始化年
    DateSelector.prototype.InitYearSelect = function()
    {
        for (var i = this.MaxYear; i>= this.MinYear; i--)
        {
        // 新建一个OPTION对象
            var op = window.document.createElement("OPTION");
           
            // 设置OPTION对象的值
            op.value = i;
           
            // 设置OPTION对象的内容
            op.innerHTML = i;
           
            // 添加到年份select对象
            this.selyear.appendChild(op);
        }
    }
   
    //初始化月
    DateSelector.prototype.InitMonthSelect = function()
    {
        for(var i = 1; i < 13; i++)
        {
            var op = window.document.createElement("OPTION");
            op.value = i;
            op.innerHTML = i;
            this.selmonth.appendChild(op);
        }
    }
    //初始化天
    DateSelector.prototype.InitDaySelect = function()
    {
        var year = parseInt(this.selyear.value);
        var month = parseInt(this.selmonth.value);
        var day = DateSelector.DaysInMonth(year,month);
       
        this.selday.options.length = 0;
       
        for (var j = 1; j < day + 1; j++)
        {
            var op = window.document.createElement("OPTION");
            op.value = j;
            op.innerHTML = j;
            this.selday.appendChild(op);
        }
    }
   
    //获得天数
    DateSelector.DaysInMonth = function(year,month)
    {
        var dat = new Date(year, month, 0);
        return dat.getDate();
    }
   
    // 处理年份和月份onchange事件的方法,它获取事件来源对象(即selYear或selMonth)
    // 并调用它的Group对象(即DateSelector实例,请见构造函数)提供的InitDaySelect方法重新初始化天数
    // 参数e为event对象
    DateSelector.Onchange = function(e)
    {
        var selector = window.document.all != null ? e.srcElement : e.target;
        selector.Group.InitDaySelect();
    }
</script>   
   
    <body>
    <form name="form1" mothod="post" path="#">
        日历:<select name="selyear" id="selyear">
              </select>
              年
              <select name="selmonth" id="selmonth" value="">
              </select>
              月
              <select name="selday" id="selday" value="">
              </select>
              日
     <script type="text/javascript" >
        var selyear = window.document.getElementById("selyear");
       
        var selmonth = window.document.getElementById("selmonth");
        var selday = window.document.getElementById("selday");
        var dt = new Date(1990,0,1);
        new DateSelector(selyear, selmonth, selday, dt);
     </script>
             
    </form>
    </body>
</html> 

阅读更多
想对作者说点什么? 我来说一句

日历控件ASP.NET软件开发

2008年10月14日 203KB 下载

简单及使用的JS日历控件

2011年05月04日 5KB 下载

日历控件.rar 日历控件.rar

2011年07月14日 24KB 下载

各种日历控件

2013年12月01日 917KB 下载

eworld控件控件控件

2009年05月04日 1.13MB 下载

一键安装office 2010 日历控件

2013年10月30日 284KB 下载

excel 2007 日历 控件

2012年12月23日 327KB 下载

Android又一个超漂亮的日历控件

2014年07月23日 1.24MB 下载

OFFICE2010日历控件

2013年01月03日 95KB 下载

没有更多推荐了,返回首页

不良信息举报

日历控件

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭