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

<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. Visual odometry and zed's IMU fusion on RTAB-Map

    "When using /camera/odom, you don't need to use visual_odometry node. rtabmap should be subscri ...

  2. luoguP3835 [模板]可持久化平衡树

    https://www.luogu.org/problemnew/show/P3835 因为博主精力和实力有限,学不懂 fhq treap 了,因此只介绍 leafy tree 解法 leafy tr ...

  3. pycharm 不显示代码提示

    1.检查是否代码本身有问题. 2.检查代码提示是否成功开启. 3.检查IDE省电模式是否关闭状态. 4.使用快捷键:ctrl+j.ctrl+space.alt+/ 其他(不能安装): 1.检查是否Py ...

  4. 表单校验--js部分

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. linux上的那些查找的命令

    由于工作的需要,少不得要在linux系统上查找各种各样的文件,关于在linux查找的命令有不少,这里小小的总结下. 简单介绍下各个命令的用途: find:实际搜索硬盘查询文件名称: whereis:查 ...

  6. [AHOI2009]中国象棋 BZOJ1801 dp

    题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...

  7. Linux 安装python3.7.3 提示已经自动安装了pip和setuptools 可是使用时bash提示没有找到pip

    Linux 安装python3.7.3 提示已经自动安装了pip和setuptools 可是使用时bash提示没有找到pip 今天的任务就是找到解决办法 另外就是用布置好python3的路径

  8. Kibana6.x.x源码分析--如何自定义savedObjectType对象

    上篇说到了如何使用kibana自带的savedObjectType对象,现在我们来自定义一个自己的savedObjectType. 下面的截图是我自己模仿写的保存对象,以及如何在kibana插件中注册 ...

  9. sharepoint_study_1

    描述:机器上进行SharePoint开发,需要SQL Server提供最基本的服务 解决: SQL Server 的数据库引擎: SQL Server 代理: SQL Server 浏览器组件:

  10. 基于pydpier爬取1药网(转载)

    1.商品爬取 #!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2019-02-02 08:59:40 # Project: o ...