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

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function DateSelector(selYear, selMonth, selDay)
  5. {
  6.     this.selYear = selYear;
  7.     this.selMonth = selMonth;
  8.     this.selDay = selDay;
  9.     this.selYear.Group = this;
  10.     this.selMonth.Group = this;
  11.     // 给年份、月份下拉菜单添加处理onchange事件的函数
  12.     if(window.document.all != null) // IE
  13.     {
  14.         this.selYear.attachEvent("onchange", DateSelector.Onchange);
  15.         this.selMonth.attachEvent("onchange", DateSelector.Onchange);
  16.     }
  17.     else // Firefox
  18.     {
  19.         this.selYear.addEventListener("change", DateSelector.Onchange, false);
  20.         this.selMonth.addEventListener("change", DateSelector.Onchange, false);
  21.     }
  22.  
  23.     if(arguments.length == 4) // 如果传入参数个数为4，最后一个参数必须为Date对象
  24.         this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
  25.     else if(arguments.length == 6) // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
  26.         this.InitSelector(arguments[3], arguments[4], arguments[5]);
  27.     else // 默认使用当前日期
  28.     {
  29.         var dt = new Date();
  30.         this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
  31.     }
  32. }
  33.  
  34. // 增加一个最大年份的属性
  35. DateSelector.prototype.MinYear = 1900;
  36.  
  37. // 增加一个最大年份的属性
  38. DateSelector.prototype.MaxYear = (new Date()).getFullYear();
  39.  
  40. // 初始化年份
  41. DateSelector.prototype.InitYearSelect = function()
  42. {
  43.     // 循环添加OPION元素到年份select对象中
  44.     for(var i = this.MaxYear; i >= this.MinYear; i--)
  45.     {
  46.         // 新建一个OPTION对象
  47.         var op = window.document.createElement("OPTION");
  48.  
  49.         // 设置OPTION对象的值
  50.         op.value = i;
  51.  
  52.         // 设置OPTION对象的内容
  53.         op.innerHTML = i;
  54.  
  55.         // 添加到年份select对象
  56.         this.selYear.appendChild(op);
  57.     }
  58. }
  59.  
  60. // 初始化月份
  61. DateSelector.prototype.InitMonthSelect = function()
  62. {
  63.     // 循环添加OPION元素到月份select对象中
  64.     for(var i = 1; i < 13; i++)
  65.     {
  66.         // 新建一个OPTION对象
  67.         var op = window.document.createElement("OPTION");
  68.  
  69.         // 设置OPTION对象的值
  70.         op.value = i;
  71.  
  72.         // 设置OPTION对象的内容
  73.         op.innerHTML = i;
  74.  
  75.         // 添加到月份select对象
  76.         this.selMonth.appendChild(op);
  77.     }
  78. }
  79.  
  80. // 根据年份与月份获取当月的天数
  81. DateSelector.DaysInMonth = function(year, month)
  82. {
  83.     var date = new Date(year, month, 0);
  84.     return date.getDate();
  85. }
  86.  
  87. // 初始化天数
  88. DateSelector.prototype.InitDaySelect = function()
  89. {
  90.     // 使用parseInt函数获取当前的年份和月份
  91.     var year = parseInt(this.selYear.value);
  92.     var month = parseInt(this.selMonth.value);
  93.  
  94.     // 获取当月的天数
  95.     var daysInMonth = DateSelector.DaysInMonth(year, month);
  96.  
  97.     // 清空原有的选项
  98.     this.selDay.options.length = 0;
  99.     // 循环添加OPION元素到天数select对象中
  100.     for(var i = 1; i <= daysInMonth ; i++)
  101.     {
  102.         // 新建一个OPTION对象
  103.         var op = window.document.createElement("OPTION");
  104.  
  105.         // 设置OPTION对象的值
  106.         op.value = i;
  107.  
  108.         // 设置OPTION对象的内容
  109.         op.innerHTML = i;
  110.  
  111.         // 添加到天数select对象
  112.         this.selDay.appendChild(op);
  113.     }
  114. }
  115.  
  116. // 处理年份和月份onchange事件的方法，它获取事件来源对象（即selYear或selMonth）
  117. // 并调用它的Group对象（即DateSelector实例，请见构造函数）提供的InitDaySelect方法重新初始化天数
  118. // 参数e为event对象
  119. DateSelector.Onchange = function(e)
  120. {
  121.     var selector = window.document.all != null ? e.srcElement : e.target;
  122.     selector.Group.InitDaySelect();
  123. }
  124.  
  125. // 根据参数初始化下拉菜单选项
  126. DateSelector.prototype.InitSelector = function(year, month, day)
  127. {
  128.     // 由于外部是可以调用这个方法，因此我们在这里也要将selYear和selMonth的选项清空掉
  129.     // 另外因为InitDaySelect方法已经有清空天数下拉菜单，因此这里就不用重复工作了
  130.     this.selYear.options.length = 0;
  131.     this.selMonth.options.length = 0;
  132.  
  133.     // 初始化年、月
  134.     this.InitYearSelect();
  135.     this.InitMonthSelect();
  136.  
  137.     // 设置年、月初始值
  138.     this.selYear.selectedIndex = this.MaxYear - year;
  139.     this.selMonth.selectedIndex = month - 1;
  140.  
  141.     // 初始化天数
  142.     this.InitDaySelect();
  143.  
  144.     // 设置天数初始值
  145.     this.selDay.selectedIndex = day - 1;
  146. }
  147. </script>
  148.  
  149. </head>
  150. <body>
  151.  
  152. <span>年</span><select id="selYear"></select>
  153. <span>月</span><select id="selMonth"></select>
  154. <span>日</span><select id="selDay"></select>
  155. <script type="text/javascript">
  156. var selYear = window.document.getElementById("selYear");
  157. var selMonth = window.document.getElementById("selMonth");
  158. var selDay = window.document.getElementById("selDay");
  159.  
  160. // 新建一个DateSelector类的实例，将三个select对象传进去
  161. new DateSelector(selYear, selMonth ,selDay, 2004, 2, 29);
  162. // 也可以试试下边的代码
  163. // var dt = new Date(2004, 1, 29);
  164. // new DateSelector(selYear, selMonth ,selDay, dt);
  165. </script>
  166.  
  167. </body>
  168. </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. 【转】C# String 与 Char[] 数组 相互转换

    源地址:http://blog.csdn.net/razilfelix/article/details/52289663 string 转换成 Char[] string ss = "abc ...

  2. Linux常用的命令（3）

    1 文件的内容显示 cat 显示全部 more: 分屏幕显示,只能向后翻 less: 分屏幕显示,可以向上翻 head:查看前n行 默认10行 tail:查看后n行 -n -f: 查看文件尾部,不退出 ...

  3. [NOI2010]能量采集 BZOJ2005 数学（反演）&&欧拉函数，分块除法

    题目描述 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量后,栋栋再使用一个能量汇集机器把这些植物采集到的能量汇集到一起. 栋栋的植物种得非常整齐,一共 ...

  4. CentOS安装pip并修改源为豆瓣源

    使用yum进行安装 yum install python-pip 若出现 No package python-pip available. 则解决方法如下: yum -y install epel-r ...

  5. django' 前端 self.status.split(' ',1)[0], self.bytes_sent AttributeError: 'NoneType' object has no attribute 'split'

    form 表单 post之后 ,重新定向当前页面的get请求 这是因为,form表单提交的时候,按钮在form表单里面

  6. nodejs npm包管理常用命令介绍

    1.输入 npm config ls -l 可以查看当前的设置 2.针对某一项设置,可以通过下面方式: npm config set 属性名 属性值 eg:npm config set prefix ...

  7. vue框架组件之父子组件之间的通信

    1.如图看解说: 你子标签要给我父标签传递信息,你总得有个触发机制告诉我这是怎么回事对吧  要不我怎么知道你要传数据给我呢!

  8. 【转】LAMBDAFICATOR: Crossing the gap from imperative to functional programming through refactorings

    Link:http://refactoring.info/tools/LambdaFicator/ Problem Description Java 8 will support lambda exp ...

  9. python用字典实现switch..case类似的函数调用

    python中没有swich..case,若要实现一样的功能,又不想用if..elif来实现,可以充分利用字典进行实现 主要是想要通过不同的key调用不同的方法,在学习过程中,发现不管输入的key是什 ...

  10. elementui 给 左侧功能栏 加上 el-scroll 时 , el-main 会 挤压 左侧导航栏..

    解决方法... el-main 给上 style='width:0'........... 并不会影响 el-main 布局...