日历控件

最新推荐文章于 2024-07-19 10:34:41 发布

nestashen

最新推荐文章于 2024-07-19 10:34:41 发布

阅读量472

点赞数

文章标签：日历 function date firefox null path

本文链接：https://blog.csdn.net/nestashen/article/details/1794848

版权

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

nestashen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
日历控件

%@page contentType="text/html;charset=utf-8"%> 日历 function DateSelector(selyear, selmonth, selday){ this.selyear = selyear; this.selmonth = selmonth; this.selday = sel
复制链接

扫一扫