两个年月下拉列表html,JS实现html下拉菜单列表进行年月日选择

最新推荐文章于 2024-04-13 00:31:38 发布
最新推荐文章于 2024-04-13 00:31:38 发布
阅读量1.6k 收藏 4
点赞数
文章标签： 两个年月下拉列表html
这篇博客介绍了如何使用JavaScript实现HTML下拉菜单列表进行年月日选择。通过引入两个JS文件，实现了年月日的动态填充，根据所选年份和月份自动更新日的选择范围。
摘要由CSDN通过智能技术生成

使用JS实现年月日下拉列表的选择

如下图：

64cfcfda63b8e013dcb5351267308b19.png

a839fe8ea021d5e0ae04f987fb99bd7f.png

具体操作：

两个js文件，设置效果

在.html中导入两个外部js文件

jquery.time.js

$(function () {

$.ms_DatePicker({

YearSelector: ".sel_year",

MonthSelector: ".sel_month",

DaySelector: ".sel_day"

});

});

birthday.js

(function($){

$.extend({

ms_DatePicker: function (options) {

var defaults = {

YearSelector: "#sel_year",

MonthSelector: "#sel_month",

DaySelector:

最低0.47元/天 解锁文章
勤劳课代表
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js自定义年份下拉列表怎么操作_纯JS实现出生日期[年月日]下拉菜单效果
weixin_39635373的博客
01-27 463
在制作网页时，可能需要给用户提供注册帐号页面，用户注册 设计很多信息，其中就有 关于出生日期的，出于用户体验，不想让用户手动输入，而HTML5的date，目前很多浏览器支持的并不是很好，所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下：1、新建一个js文件，如birthday.js;function DateSelector(selYear, selMonth, selDay) {...
html年月日三下拉框联动
04-10
简单实用的代码，html年月日三下拉框联动
javascript控件 --年月日的下拉菜单
Simplicity is more complicated than you think
08-28 3054
1.html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>如何实现一个日期下拉菜单title>script type="text/javascript">...function DateSelector(selYear, selMonth, selDay)...{    this
下拉框选择年月日代码
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>
php生成年月日下载列表的方法
10-24
用户可以从这三个下拉菜单中选择年、月、日，然后提交表单，以实现对特定日期的下载列表筛选。 函数`mdy()`有六个参数，分别对应三个下拉菜单的名称（`$mid`、`$did`、`$yid`）和三个默认值（`$mval`、`$dval`、`$y...
javascript实现日历控件(年月日关闭按钮)
10-27
在这个实例中，我们将探讨如何实现一个具有年、月、日选择以及关闭按钮的基本日历控件。 首先，我们需要构建HTML结构。日历控件的HTML基础如下： ```html 年:<select id="year"></select> 月:...
java月份下拉菜单_实现一个日期下拉菜单
weixin_35935712的博客
02-13 1065
这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理，实例是实现一个日期选择下拉菜单。本文调试环境为IE6/firefox1.5。首先来分析一下日期下拉菜单的需求。建议大家在写任何程序的时候都应该在动手编程之前想清楚自己需要些什么，这样编程才有效率。年份： 一般来说有一个有效年份，比如说1900年至当前年份才是为效的，这个要根据实际需求来确定，如果是该下拉菜单是用来选择出生年月...
年月日三级联动下拉
12-24
1. **HTML与CSS**：构建基本的下拉菜单结构，使用`<select>`元素创建年、月、日的下拉列表，并利用CSS进行样式定制，确保视觉效果的美观和一致性。 2. **JavaScript/jQuery**：实现联动的核心逻辑，监听年份和月份...
jquery select 多种下拉日期选择插件
06-06
，默认一个input输入框，点击后下拉框可以快速选择今天，或者过去七天、过去一年时间、上个月时间等快捷选择方式，或者弹出日历选择器提供选择
php日期年月日下拉框,CSS3年月日日期三级联动下拉选择代码
weixin_35613582的博客
03-13 423
CSS3年月日日期三级联动下拉选择代码js代码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++) //以今年为准...
年月日三联动下拉框(无刷新)
luyesql的专栏
10-10 1804
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(
js实现年月日三级下拉菜单联动
热门推荐
天易
06-19 2万+
一：图片预览： 二：js代码如下： 年月日三下拉框联动 年 月 日 window.onload = function(){ strYYYY = document.form1.YYYY.outerHTML; strMM = document.form1.MM.outerHTML; strDD = documen
jqueryui（五）日期选择器
经验在于积累而不在于年限---dreamboycx
11-29 683
原文地址：ui（五）日期选择器 datepicker">jquery ui（五）日期选择器 datepicker作者：kerwin JQuery官方的Datepicker控件，可以很方便的使用，可以让用户很方便的在输入框上选择时间。 废话少说，先上实例 【代码】     $(function(){        $( "#datepicker" ).datepicker();
js自定义年份下拉列表怎么操作_JS时间下拉列表-------只显示年份
weixin_39712611的博客
01-27 268
var Calendar = {};Calendar.$ = function (id){return document.getElementById(id);//id选择器}/*** 初始化方法* @param context* @param startYear* @param floatYear*/Calendar.init = function (startYear,floatYear,co...
jQuery之日期选择器
张波的技术积累
05-07 1万+
1：默认情况下，日期输入文本框获得页面焦点的时候，日期选择器组件会在一个覆盖层中打开日历选择面板，当日期输入文本框失去焦点或者选择 一个日期的时候，将自动关闭该日历选择面板       $(selector).datepicker([options]); 简单实例：     DatePicker Local $(document).ready(function(){
jQuery UI -- 日历选择器
最新发布
2301_79849953的博客
04-13 1351
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
jQuery实现日期选择器
一个前端工作者的博客
03-31 1577
日期选择器
HTML中设置出生日期年月日下拉列表框
05-18
下面是一个简单的出生日期年月日下拉列表框的示例代码： ```html 出生日期： 年 <option value="1990">1990年 <option value="1991">1991年 <!-- 其他年份选项 --> 月 <option value="1">1月 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值