HTML中设置出生日期年月日下拉列表框及默认年月日

最新推荐文章于 2024-04-23 02:00:49 发布
最新推荐文章于 2024-04-23 02:00:49 发布
阅读量8.9k 收藏 16
点赞数 2
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77721393/article/details/130254659
版权

一：出生日期设置下拉列表选择

语法格式：

<select>

              <option>年数</option>

              ......

              <option>年数</option>

       </select>年

<select>

              <option>月份</option>

              ......

              <option>月份</option>

       </select>月

<select>

              <option>哪一日</option>

              ......

              <option>哪一日</option>

       </select>日

例如：

<select>

              <option>2001</option>

              <option>2002</option>

              <option>2003</option>

       </select>年

<select>

              <option>10</option>

              <option>9</option>

       </select>月

<select>

              <option>21</option>

              <option>11</option>

</select>日

结果：

二：出生日期设置下拉列表选择，设置有默认值

例如：默认出生日期为2002年5月19日

<select>

              <option>2001</option>

              <option selected="selected">2002</option>

              <option>2003</option>

       </select>年

       <select>

              <option>10</option>

              <option selected="selected">5</option>

              <option>9</option>

       </select>月

       <select>

              <option>21</option>

              <option>11</option>

              <option selected="selected">19</option>

       </select>日

结果：

小小林代码
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
下拉框选择年月日代码
04-27
<HTML> <HEAD> <title>年月日三联动下拉框</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <meta name='author' content='http://singlepine.cnblogs.com/'> </HEAD> <body> <form name="form1"> 请选择 年 选择 月 选择 日 </form> [removed]<!-- function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年 document.form1.YYYY.options.add(new Option(" "+ i +" 年", i)); //赋月份的下拉框 for (var i = 1; i < 13; i++) document.form1.MM.options.add(new Option(" " + i + " 月", i)); document.form1.YYYY.value = y; document.form1.MM.value = new Date().getMonth() + 1; var n = MonHead[new Date().getMonth()]; if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++; writeDay(n); //赋日期下拉框 document.form1.DD.value = new Date().getDate(); } if(document.attachEvent) window.attachEvent("onload", YYYYMMDDstart); else window.addEventListener('load', YYYYMMDDstart, false); function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[MMvalue - 1]; if (MMvalue ==2 && IsPinYear(str)) n++; writeDay(n) } function MMDD(str) //月发生变化时日期联动 { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //据条件写日期的下拉框 { var e = document.form1.DD; optionsClear(e); for (var i=1; i<(n+1); i++) e.options.add(new Option(" "+ i + " 日", i)); } function IsPinYear(year)//判断是否闰平年 { return(0 == year%4 && (year0 !=0 || year@0 == 0)); } function optionsClear(e) { e.options.length = 1; } //--> [removed] </body> </HTML>
日期下拉列表，年月日分开的！！
01-04
日期下拉列表，年月日分开的！！简单来说就是两个数字之间的下拉列表
html和原生js实现年月或者日期选择并设置默认值
qq_57064821的博客
03-23 394
最近实习做了一个考勤系统的页面，要和php的后端相结合，要求使用原生的html和js，不使用项目管理的方式编写，但是统计界面需要实现一个用户选择年月，根据用户的选择来展示这个月的考勤数据的功能。从上边设置默认值的js代码中可以看出，赋值使用的是.val()函数，最开始我使用的是innerText， 是不生效的，毕竟input不是div，所以innerText是不生效的。接下来上代码：（我这里是在html中使用了vue文件引入，所以有一些vue的写法）2、month：可以选取年月两级。
自定义html5中日期选取器的样式
@素素~的博客
12-28 1806
自定义html5中日期选取器的样式
年月日三联动下拉框(无刷新)
luyesql的专栏
10-10 1754
WebForm2 function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i document.form1.YYYY.options.add(
HTML时间日期选择器
热门推荐
zhu1243961271的博客
10-22 1万+
时间日期选择器
HTML5前端如何实现日期选择（日历）
qq_41905051的博客
12-12 5094
HTML5前端如何实现日期选择（日历）
HTML日期选择器：简化日期输入与交互
a451319296的博客
06-17 7623
HTML日期选择器（Date Picker）是一种方便的用户界面元素，用于简化日期输入和交互。通过使用元素的type="date"属性，可以轻松创建日期选择器。用户可以从交互式日历中选择日期值，并且日期格式通常遵循ISO 8601标准。日期选择器还支持设置最小值和最大值以限制日期范围。通过JavaScript，可以获取用户选择的日期值，进而进行后续处理。HTML日期选择器在现代浏览器中得到广泛支持，尽管在旧版本浏览器上可能有不同的呈现方式或不支持。了解和应用HTML日期选择器可以提高表单交互性
html怎么实现年月日的选择,利用select实现年月日三级联动的日期选择效果【推荐】...
weixin_39875028的博客
06-10 5961
前面的话关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践，下面将对日期选择效果进行详细介绍规划默认情况下，年、月、日分别由3个select控件组成，id分别为sel1，sel2，sel3。它们且所包含的option[0]的值，分别为'年'、'月'、'日'年份范围为1900-2100，月份范围为1-12，天的范围为1-31年份范围、月份范围是不变的。而天...
html实现用户注册页面（生日实现年月日的三级联动）
qq_38473254的博客
05-22 1万+
注册页面 期待效果如下： 代码实现： <!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <!-- 表单，用于提交按钮，隐式提交 --> <form action="" method="post"> <table border="0" width="500px" align="center" bgcolor="#
纯html实现input输入框选择日期时间
nongcunqq的博客
07-05 7302
参考 https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_datetime-local
php中根据某年第几天计算出日期年月日的代码
10-28
在PHP中，使用内置的date()函数很容易得到任意一天是当前年的第几天，格式为date('z')，为此，很多PHP程序会用一年中的第几天作为数据库的索引（index）。
html5 多种日期选择框
12-10
多种日期选择框，模拟手机app日期选择框的多种效果
jQuery实现动态生成年月日级联下拉列表示例
10-17
主要介绍了jQuery实现动态生成年月日级联下拉列表,结合具体实例形式分析了jQuery日期时间运算构造级联下拉列表相关操作技巧,需要的朋友可以参考下
纯JS实现出生日期[年月日]下拉菜单效果
12-02
可能需要给用户提供注册帐号页面，用户注册 设计很多信息，其中就有 关于出生日期的，出于用户体验，不想让用户手动输入，而HTML5的date，目前很多浏览器支持的并不是很好，所以就可以用JS实现年、月、日3个下拉框的...
js出生日期 年月日级联菜单示例代码
10-26
本篇文章主要介绍了js出生日期 年月日级联菜单的示例代码。需要的朋友可以过来参考下，希望对大家有所帮助
HTML中的文档声明
小卡酷谋的博客
04-22 1174
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
HTML随机点名程序
m0_65992344的博客
04-22 467
HTML随机点名程序
Web前端开发之HTML_3
最新发布
zx1026409886的博客
04-23 910
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
HTML中设置出生日期年月日下拉列表框
05-18
在 HTML 中，可以使用 `<select>` 元素和 `<option>` 元素来创建下拉列表框。 下面是一个简单的出生日期年月日下拉列表框的示例代码： ```html <label>出生日期：</label> <select name="year"> <option value="">年</option> <option value="1990">1990年</option> <option value="1991">1991年</option> <!-- 其他年份选项 --> </select> <select name="month"> <option value="">月</option> <option value="1">1月</option> <option value="2">2月</option> <!-- 其他月份选项 --> </select> <select name="day"> <option value="">日</option> <option value="1">1日</option> <option value="2">2日</option> <!-- 其他日期选项 --> </select> ``` 在这个示例中，我们创建了三个 `<select>` 元素，分别用于选择年、月、日。每个 `<select>` 元素都包含若干个 `<option>` 元素，用于表示可选项。 注意，这个示例中的选项值（即 `<option>` 元素的 `value` 属性）可以根据需要进行修改，例如可以使用 JavaScript 动态生成选项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值