日历控件

原创 2007年09月21日 16:00:00

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

相关文章推荐

Android自定义View(CustomCalendar-定制日历控件)

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53420889 本文出自:【openXu的博客】目录: 1分析 2自定义属性 3onM...

日历控件My97DatePicker使用--onchange不生效

这里先显示大家都可以看到的My97DatePicker的用法: WdatePicker日历控件使用方法(http://www.cnblogs.com/yuhanzhong/archive/2011/...

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

※效果 ※使用方法 package com.fancyy.calendarweight; import java.util.ArrayList; import java.util.List; ...

fullCalendar日历控件的使用总结

因为项目需求,用了三天时间研究这个控件,改写成自己想要的。总结如下: 官方文档 http://fullcalendar.io/docs/ 说明文档 http://blog.csdn.net/z...

MaterialCalendarView日历控件的使用小结

最近公司项目需要用到日历,来实现某些功能,作为小菜的我首先就想到了去找现有的日历控件,朋友推荐MaterialCalendarView非常非常的强大,于是我又开始了新一轮的“装逼”之路 GitHub链...

WdatePicker日历控件使用方法

1. 跨无限级框架显示   无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的   示例2-7 跨无限级框架演示...
  • weisg81
  • weisg81
  • 2015年02月06日 15:31
  • 196

自定义javascript日历控件

Web页中的日历一般离不开表格,通常都使用表格装载指定月的日期等信息。所以,要编写JS日历,首先必须解决的问题是表格的行与列问题。列是固定的,七列,因为一周有七天。行需要动态计算,因为,每一个月的第一...
  • my98800
  • my98800
  • 2017年08月08日 07:45
  • 364

自定义View之_日历控件

今天又有新的需求了,喏,这个就是     这里呢需要一个日历,点击连个小的三角形可以进入到下一个月或者上一个月,左右滑动也是实现类似上面两个小三角形的功能,其中有三个橘黄色的圆圈,是到时...

Visual C++中的日历控件使用详解

前言:   控件在Visual C++编程学习中占据很重要的位置。笔者在国外英文网站上看到了这篇关于日历控件学习的文章,虽然内容看似简单,但读完后感觉到还是学到了一些东西。感觉到原著作者对一些不...

开源日历控件DatePicker源码解析

在一些项目开发中,会使用日历去标识事务,所以根据美工出的效果图,我们可以采用不同的方法去实现。比如通过GridView扣扣你敢、自定义View实现日历控件,这些都是我们解决问题的手段,我也实现过一个自...
  • Mr_dsw
  • Mr_dsw
  • 2016年05月06日 20:54
  • 4587
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:日历控件
举报原因:
原因补充:

(最多只允许输入30个字)