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

<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. zookeeper安装和使用 windows

    的 Zookeeper 是以 3.4.5 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取,Zookeeper 的安装非常简单, ...

  2. JVM高级特性与实践（一）：Java内存区域 与 内存溢出异常

    套用<围城>中的一句话,“墙外面的人想进去,墙里面的人想出来”,用此来形容Java与C++之间这堵内存动态分配和垃圾收集技术所围成的“围墙”就再合适不过了. 对于从事C.C++的开发人员而 ...

  3. php 写入csv时 双引号，逗号及特殊字符

    1.双引号 <?php function new_csv($string) { $filename = date('Ymd').'.csv'; //设置文件名 header("Cont ...

  4. JSP使用Struts2标签库报错

    JSP中使用<%@ taglib prefix="s" uri="/struts-tags" %>报错:Cannot find the tag li ...

  5. day017-------python 类与类的关系

    类与类的关系的简单说明 一:类与类的关系 001:依赖关系 002:管理关系 003:继承关系: 二:实例理解: 01:依赖关系: # 植物大战僵尸. 创建一个植物. 创建一个僵尸 # 植物: 名字, ...

  6. 005 Genymotion模拟器的使用和逍遥模拟器的使用

    1.Genymotion模拟器 (1)Genymotion Device Manager的图标 重启软件Android Studio后,选择菜单栏“View--Toolbar”,让工具栏显示出来,可以 ...

  7. C++_类入门2-使用类

    进一步探讨类的特征,重点是类设计技术,而不是通用原理.一些特性很容易,一些特性很微妙. 运算符重载 目的是使C++操作更美观,更接近于内置类型的操作. 隐藏了内部的实现机理,并强调了实质. 格式:op ...

  8. C++_类入门1-对象和类的介绍

    面向对象是(OOP)是特殊的.设计程序的概念性方法:包含以下特性: 抽象: 封装和数据隐藏: 多态: 继承: 代码的可重用性: 为了实现这些特性并且将这些特性组合在一起,C++所做的最重要的改进是提供 ...

  9. B. Div Times Mod Round #528 (Div. 2)【简单数学】

    一.题面 题目链接 二.分析 一个简单的数学题目,这里首先要把x分解了看 $x = kd + c$ 这样原问题中的n就变成了 $n = dc$ 上面这个式子中,c因为是x除k取余得到的,那么可以肯定 ...

  10. openssl-devel和openssl 是什么具体关系

    [转自] https://zhidao.baidu.com/question/919579491101051499.html Redhat在封装openssl的时候,把openssl分成了几个部分,执 ...