日期控件多的是，这里收录的是最简单的一种

<html>

<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;

    // 给年份、月份下拉菜单添加处理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);

    }

    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());

    }

}

// 增加一个最大年份的属性

DateSelector.prototype.MinYear = 1900;

// 增加一个最大年份的属性

DateSelector.prototype.MaxYear = (new Date()).getFullYear();

// 初始化年份

DateSelector.prototype.InitYearSelect = function()

{

    // 循环添加OPION元素到年份select对象中

    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()

{

    // 循环添加OPION元素到月份select对象中

    for(var i = 1; i < 13; i++)

    {

        // 新建一个OPTION对象

        var op = window.document.createElement("OPTION");

        // 设置OPTION对象的值

        op.value = i;

        // 设置OPTION对象的内容

        op.innerHTML = i;

        // 添加到月份select对象

        this.selMonth.appendChild(op);

    }

}

// 根据年份与月份获取当月的天数

DateSelector.DaysInMonth = function(year, month)

{

    var date = new Date(year, month, 0);

    return date.getDate();

}

// 初始化天数

DateSelector.prototype.InitDaySelect = function()

{

    // 使用parseInt函数获取当前的年份和月份

    var year = parseInt(this.selYear.value);

    var month = parseInt(this.selMonth.value);

    // 获取当月的天数

    var daysInMonth = DateSelector.DaysInMonth(year, month);

    // 清空原有的选项

    this.selDay.options.length = 0;

    // 循环添加OPION元素到天数select对象中

    for(var i = 1; i <= daysInMonth ; i++)

    {

        // 新建一个OPTION对象

        var op = window.document.createElement("OPTION");

        // 设置OPTION对象的值

        op.value = i;

        // 设置OPTION对象的内容

        op.innerHTML = i;

        // 添加到天数select对象

        this.selDay.appendChild(op);

    }

}

// 处理年份和月份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();

}

// 根据参数初始化下拉菜单选项

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();

    // 设置天数初始值

    this.selDay.selectedIndex = day - 1;

}

</script>

</head>

<body>

<span>年</span><select id="selYear"></select>

<span>月</span><select id="selMonth"></select>

<span>日</span><select id="selDay"></select>

<script type="text/javascript">

var selYear = window.document.getElementById("selYear");

var selMonth = window.document.getElementById("selMonth");

var selDay = window.document.getElementById("selDay");

// 新建一个DateSelector类的实例，将三个select对象传进去

new DateSelector(selYear, selMonth ,selDay, 2004, 2, 29);

// 也可以试试下边的代码

// var dt = new Date(2004, 1, 29);

// new DateSelector(selYear, selMonth ,selDay, dt);

</script>

</body>

</html>

日期控件html的更多相关文章

  1. bootstrop 日期控件 datepicker被弹出框dialog覆盖的解决办法

    筒子们在使用bootstrap的日期控件(datepicker , 现在官网提供的名称叫 datetimepicker)时可能会遇到如上图的问题这是啥原因造成的呢? 答案很简单时输出的优先级造成的(z ...

  2. my97DatePicker日期控件——日期输入框联动，使用focus使第二个输入框没展示出日期控件

    描述问题场景: 1.jquery使用的版本是jquery-1.7.2.min.js 2.代码不是写在页面上的,是通过事件后追加的 <!DOCTYPE html> <html> ...

  3. 怎样使用My97日期控件

    有网友说无法使用My97日期控件,Insus.NET测试一下,是可以正常使用了. 在ASP.NET MVC环境中测试. 去官网下载My97日期控件程序包: 下载解压之后,把程序的目录拷贝至projec ...

  4. jQuery Datepicker日期控件

    datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. R ...

  5. jQuery LayDate 日期控件

    她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封 ...

  6. JQuery datepicker 日期控件设置

    datepicker控件可通过参数设置进行语言切换,以下可实现,系统所有日期控件默认为中文,在特定页面或者特定条件下可切换成英语!~ HTML: <!DOCTYPE html> <h ...

  7. bootstrap-datetimepicker 日期控件的开始日期

    今天做日期控件,需求要求设置一个时间范围限制,选择从今天开始的日期才可以选择,今天以前都不可以选择 主要体现在bootstrap-datetimepicker控件下面的2个日期参数 weekStart ...

  8. easyui 日期控件清空值

    最近用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下. 1,调用方法清空 $('#yourId').combo('setText',''); 2,更改js文件 从官网下 ...

  9. WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...

  10. selenium webdriver自动化对日期控件的处理

    用JS去掉日期输入框的readOnly属性. 代码如下: ----------------------------------------------------------------------- ...

随机推荐

  1. jenkins html报告不显示样式

    解决办法: 1.安装Startup Trigger,在jenkins节点启动时触发构建: 2.安装Groovy,直接运行Groovy代码: 3.新建一个Job,用于jenkins启动时执行配置命令: ...

  2. Codeforces Round #551 (Div. 2)A. Serval and Bus

    A. Serval and Bus time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  3. 最近关于linux的一些小问题。

    redhat 用yum更新时需要注册付费.centos 不用. 原来版本的ifconfig 在centos中变为了ip addr.

  4. struts2的主要工作流程

    struts2的框架结构图 struts2的主要工作流程: 1.客户端请求一个HttpServletRequest的请求,如在浏览器中输入http://localhost: 8080/bookcode ...

  5. 老男孩Day14作业：堡垒机

    一.作业需求: 1.业务需求 兼顾业务安全目标与用户体验,堡垒机部署后,不应使用户访问业务系统的访问变的复杂,否则工作将很难推进,因为没人喜欢改变现状,尤其是改变后生活变得更艰难     保证堡垒机稳 ...

  6. SDUT OJ 数据结构实验之二叉树六：哈夫曼编码

    数据结构实验之二叉树六:哈夫曼编码 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Descr ...

  7. JDK 5 ~ 10 新特性倾情整理！

    JDK 5 ~ 10 新特性倾情整理! 最近连 JDK11都在准备发布的路上了,大家都整明白了吗?也许现在大部分人还在用6-8,8的新特性都没用熟,9刚出不久,10-11就不用说了. 为了大家对JDK ...

  8. C++_异常7-exception类

    C++异常的主要目的是为了设计容错程序提供语言级支持. 即异常使得在程序设计中包含错误处理功能更加容易,以免事后采取一些严格的错误处理方式. 异常的灵活性和相对方便性激励着程序员在条件允许的情况下在程 ...

  9. rest-assured的xmlPath使用方法总结

    xmlPath的使用方法跟JsonPath的使用方法相近,下面简单总结一下: 准备xml文件数据: <records> <car name='HSV Maloo' make='Hol ...

  10. 【原创】nginx入门

    一.简介 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点( ...