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

<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. IO模型《二》阻塞IO

    阻塞IO(blocking IO) 在linux中,默认情况下所有的socket都是blocking,一个典型的读操作流程大概是这样: 当用户进程调用了recvfrom这个系统调用,kernel就开始 ...

  2. 03process对象的其他方法属性

    一 Process对象的join方法 在主进程运行过程中如果想并发地执行其他的任务,我们可以开启子进程,此时主进程的任务与子进程的任务分两种情况 情况一:在主进程的任务与子进程的任务彼此独立的情况下, ...

  3. Tensorflow报错：InvalidArgumentError: You must feed a value for placeholder tensor 'input_y' with dtype

    此错误神奇之处是每次第一次运行不会报错,第二次.第三次第四次....就都报错了.关掉重启,又不报错了,运行完再运行一次立马报错!搞笑! 折磨了我半天,终于被我给解决了! 问题解决来源于这边博客:htt ...

  4. Eclipse内存不足 增加eclipse的运行内存

    自己解决的 三.    修改Run Configurations (此方法可行) 在代码上右键,依次点击“Run As ”-> “Run Configurations ”,在Arguments  ...

  5. [AGC006] D - Median Pyramid Hard 二分

    Description ​ 现在有一个NN层的方块金字塔,从最顶层到最底层分别标号为1...N1...N. ​ 第ii层恰好有2i−12i−1个方块,且每一层的中心都是对齐的. 这是一个N=4N=4的 ...

  6. 题解 P3386 【【模板】二分图匹配】

    题目链接 首先呢声明一下,本宝宝发这篇题解只是为了(goto a;) 个人还是比较喜欢跑dinic暴力跑最大流...竟然比匈牙利还快..如果说不懂网络流的~~蒟蒻~~大佬们.可以看看这个(反正我就是在 ...

  7. iOS 开发之 GCD 不同场景使用

    header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...

  8. Python中实现简单的插件框架

    在系统设计中,经常我们希望设计一套插件机制,在不修改程序主体情况下,动态去加载附能. 我设想的插件系统: 1.通过类来实现 2.自动查找和导入 我们假设需要实现一个简单的插件系统,插件可以接收一个参数 ...

  9. P3994 高速公路 树形DP+斜率优化+二分

    $ \color{#0066ff}{ 题目描述 }$ C国拥有一张四通八达的高速公路网树,其中有n个城市,城市之间由一共n-1条高速公路连接.除了首都1号城市,每个城市都有一家本地的客运公司,可以发车 ...

  10. 使用@符号让C#中的保留字做变量名的方法详解

    原来还有一种办法就是加@符号(看了@符号的作用又多了一个): 复制代码代码如下: class @int    {        static void Main(string[] args)      ...