日历控件

原创 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> 

在iOS上实现一个简单的日历控件

近期需要写一个交互有点DT的日历控件,具体交互细节这里略过不表。 不过再怎么复杂的控件,也是由基础的零配件组装起来的,这里最基本的就是日历控件。 先上图: 从图中可以看出日历控件就是由一...
  • jasonblog
  • jasonblog
  • 2014年03月24日 19:33
  • 64826

自定义日历控件(只是包含年和月)

因项目需要一个只显示年和月的日历,网上没有找到合适的,只有自己写了一个比较简单的,也封装的不够彻底,不过能用就行,凑合着看嘛。 中间遇到了很多小问题,并不难,只是有时半天手足无措,所以特此记录一下 ...
  • HeChunyanChen
  • HeChunyanChen
  • 2016年11月03日 18:50
  • 304

安卓自定义日历滑动的日历控件

安卓自定义日历滑动的日历控件标签(空格分隔): 安卓最近公司项目需要做这个需求,自己才疏学浅,总算能写出个大概来,遂在这里记录下来。分析先来分析一下: 首先,我们的需求是可以左右点击查看跳转到下一个...
  • free_co
  • free_co
  • 2016年12月01日 13:51
  • 702

iOS之自定义简单的日历控件

iOS并没有系统日历控件,但是说白了就是基于UICollectionView的封装,对于UICollectionView我就不说他的创建了,主要难在数据的处理,下面我就说一下处理数据的思路: 我将数...
  • qq_33623316
  • qq_33623316
  • 2017年04月10日 14:27
  • 2195

Calendar 自定义日历控件

CalendarView介绍代码地址:https://github.com/09xuanjian/CalendarView这是一个日历控件,很多时候我们需要把一些信息通过时间戳的方式展示给用户。日历是...
  • u011623470
  • u011623470
  • 2015年12月26日 20:27
  • 752

iOS控件之日历

iOS没用日历控件,所以我们需要自己进行封装,博主是用的CollectionView封装的 其实难就难在如何处理数据,下面上代码 这里是我封装的CollectionView,继承UICollectio...
  • qq_16437739
  • qq_16437739
  • 2016年02月25日 16:45
  • 3501

iOS自定义实现日历控件

SZCalendarPicker.h #import @interface SZCalendarPicker : UIView @property...
  • NickYangBooy
  • NickYangBooy
  • 2016年09月12日 12:56
  • 669

自定义javascript日历控件

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

Android自定义控件之日历控件

Android自定义控件之日历控件三月份学习android,至今也有半年有余,中间也做过两个项目,但是依然感觉自己做的应用不是很有新意,比不上应用市场上那些应用如此绚丽。所以自己仍需继续努力。学习至今...
  • Mr_dsw
  • Mr_dsw
  • 2015年09月26日 22:21
  • 24332

android日历控件的使用

钟表控件一些开源项目的使用
  • zhaozhuzi
  • zhaozhuzi
  • 2017年04月24日 15:22
  • 4688
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:日历控件
举报原因:
原因补充:

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