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

<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. linux上使用tomcat及查看日志

    启动 startup.sh #执行bin/startup.sh #启动tomcatbin/shutdown.sh #停止tomcattail -f logs/catalina.out #看tomcat ...

  2. 【BZOJ3589】动态树 树链剖分+线段树

    Description 别忘了这是一棵动态树, 每时每刻都是动态的. 小明要求你在这棵树上维护两种事件 事件0: 这棵树长出了一些果子, 即某个子树中的每个节点都会长出K个果子. 事件1: 小明希望你 ...

  3. 通过get_FOO_display 查找模型中的choice值

    在django的models.py 中,我们定义了一些choices的元组,类似一些字典值,一般都是下拉框或者单多选框,例如 0对应男 1对应女等. class Area(models.Model): ...

  4. spring+hibernate中的事务

    上下文: 从数据库服务器上获取数据可以,保存的时候增加了事务提交,即em.flush方法,报错no transaction in progress 报错信息: no transaction in pr ...

  5. upsource代码审查

    upsource 从零搭建代码审查平台,需要的不仅是把代码审查的工具搭起来,还要结合公司情况制定一系列的代码审查规范.下面是对选择的upsource web端代码审查工具的安装及介绍.详细的请看这篇文 ...

  6. PHP批量给目录下所有的文件转换编码

    代码如下: function tree(&$arr_file, $directory, $dir_name=''){            $mydir = dir($directory);  ...

  7. 洛谷 P1503 鬼子进村

    题目背景 小卡正在新家的客厅中看电视.电视里正在播放放了千八百次依旧重播的<亮剑>,剧中李云龙带领的独立团在一个县城遇到了一个鬼子小队,于是独立团与鬼子展开游击战. 题目描述 描述 县城里 ...

  8. vue 遇到的一个问题......

    当我用 @tap 或者 @click 触发 ajax事件时,返回的结果会非常慢--- 我也不清楚为啥会这样....(仅仅在chrome下会这样--- 所以 我用 touchend 方法替代了 该方法. ...

  9. C#基础语法（二）

    四.CTS类型 C#认可的基本预定义类型并没有内置于C#语言中,而是内置于.NET Framework中. 例如,在C#中声明一个int类型的数据时,声明的实际上是.NET结构System.Int32 ...

  10. 118th LeetCode Weekly Contest Pancake Sorting

    Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...