关闭

日历控件

318人阅读 评论(0) 收藏 举报

<%@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> 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:32509次
    • 积分:481
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:14篇
    • 译文:0篇
    • 评论:2条
    最新评论