精华内容
下载资源
问答
  • html年月日下拉代码
    2021-06-26 08:30:17

    html

    年:月:日:

    js

    //获取当前时间

    var MyDate = newDate();//获取当前年

    var yearNow =MyDate.getFullYear();//获取当前月[月为0-11所以加1]

    var monthNow = MyDate.getMonth()+1;//获取当前天

    var DateNow =MyDate.getDate();//获取当前月有多少天

    var curMonthDays = new Date(MyDate.getFullYear(), (MyDate.getMonth()+1), 0).getDate();//标志,日期未做任何改变,用来给天加判断

    var flag = 0;

    $(function(){

    initYear();//初始化年

    initMonth();//初始化月

    initDate(curMonthDays);//初始化日,传参这个月有多少天

    $(‘#year‘).change(changeYear);//年改变

    $(‘#month‘).change(changeMonth);//月改变

    })//初始化年

    functioninitYear(){//前后五年时间循环

    var str ="";for(var i = yearNow-5; i < yearNow+5; i++){

    str+= ""+i+"";

    }//放入页面并设置默认值为当前年

    $(‘#year‘).html(str).val(yearNow);

    }//初始化月

    functioninitMonth(){//月份循环

    var str ="";for(var i = 1; i < 13; i++){

    str+= ""+i+"";

    }//放入页面并设置默认值为当前月

    $(‘#month‘).html(str).val(monthNow);

    }//初始化天,传参数默认值为31天

    functioninitDate(num){//根据传入参数循环天数

    var str ="";var DateSel = $(‘#date‘).val();for(var i = 1; i <= num; i++){

    str+= ""+i+"";

    }//当标志为0即未改变,日期设置默认值为当前日期

    if(flag == 0){

    $(‘#date‘).html(str).val(DateNow);//当标志改变时,日期设置为选中的日期

    }else{

    $(‘#date‘).html(str).val(DateSel);

    }

    }//年改变函数

    functionchangeYear(){//获取选中的年

    var year = $(‘#year‘).val();//获取选中的月

    var month = $(‘#month‘).val();

    flag= 1;//标志改变

    //如果月份为2月

    if(month == 2){//并且为闰年

    if(year%4 == 0 && year%100 !=0 || year%400 == 0){//天数传参29天

    initDate(29);

    }else{//否则天数传参28天

    initDate(28);

    }

    }

    }//月改变函数

    functionchangeMonth(){//获取选中的月

    var month = $(‘#month‘).val();

    flag= 1;//标志改变

    //当月份为4 6 9 11时

    if(month == 4 || month == 6 || month == 9 || month == 11){//天数传参30天

    initDate(30);//月份为2时

    }else if(month == 2){//执行改变年函数

    changeYear();

    }else{//其他月份天数传参31天

    initDate(31);

    }

    }

    2月判断在改变年的函数当中,

    当月份改变为2月时调用年改变函数。

    方法二:

    初始化年月不变,天函数中做判断,当改变年月时调用天函数。

    下面为天函数

    总结:时间获取     var t = new Date();

    new Date 获取当前日期和时间。  eg:2018-06-24T09:33:12.309Z

    t.getFullYear() 获取当前年(4位)

    t.getYear(); //获取当前年份(2位)

    t.getMonth() 获取月份 (0-11)所以当前月份应加一

    t.getDate() 获取当前天

    t.getDay() 获取当前星期(0-6)

    t.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

    t.getHours(); //获取当前小时数(0-23)

    t.getMinutes(); //获取当前分钟数(0-59)

    t.getSeconds(); //获取当前秒数(0-59)

    t.getMilliseconds(); //获取当前毫秒数(0-999)

    t.toLocaleString()日期时间转换为中文。

    特别提示://获取当前月有多少天 var curMonthDays = new Date(MyDate.getFullYear(), (MyDate.getMonth()+1), 0).getDate();

    具体原因不明。

    更多相关内容
  • 下拉框选择年月日代码

    热门讨论 2012-04-27 21:46:30
    年月日三联动下拉框</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <meta name='author' content='http://singlepine.cnblogs.com/'> </HEAD> <...
  • 年月日下拉框

    2018-04-04 11:47:01
    年月日选择.rar,demo.html
  • JS实现html下拉菜单列表进行年月日选择

    万次阅读 多人点赞 2019-04-04 11:21:58
    使用JS实现年月日下拉列表的选择 如下图: 具体操作: 两个js文件,设置效果 在.html中导入两个外部js文件 jquery.time.js $(function () { $.ms_DatePicker({ YearSelector: ".sel_year", MonthSelector: "....

    使用JS实现年月日下拉列表的选择
    如下图:
    在这里插入图片描述
    在这里插入图片描述
    具体操作:
    两个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: "#sel_day",
             FirstText: "--",
             FirstValue: 0
       };
       var opts = $.extend({}, defaults, options);
       var $YearSelector = $(opts.YearSelector);
       var $MonthSelector = $(opts.MonthSelector);
       var $DaySelector = $(opts.DaySelector);
       var FirstText = opts.FirstText;
       var FirstValue = opts.FirstValue;
    
       // 初始化
       var str = "<option value=\"" + FirstValue + "\">"+FirstText+"</option>";
       $YearSelector.html(str);
       $MonthSelector.html(str);
       $DaySelector.html(str);
    
       // 年份列表
       var yearNow = new Date().getFullYear();
       var yearSel = $YearSelector.attr("rel");
       for (var i = yearNow; i >= 1900; i--) {
    		var sed = yearSel==i?"selected":"";
    		var yearStr = "<option value=\"" + i + "\" " + sed+">"+i+"</option>";
            $YearSelector.append(yearStr);
       }
    
        // 月份列表
    	var monthSel = $MonthSelector.attr("rel");
        for (var i = 1; i <= 12; i++) {
    		var sed = monthSel==i?"selected":"";
            var monthStr = "<option value=\"" + i + "\" "+sed+">"+i+"</option>";
            $MonthSelector.append(monthStr);
        }
    
        // 日列表(仅当选择了年月)
        function BuildDay() {
            if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {
                // 未选择年份或者月份
                $DaySelector.html(str);
            } else {
                $DaySelector.html(str);
                var year = parseInt($YearSelector.val());
                var month = parseInt($MonthSelector.val());
                var dayCount = 0;
                switch (month) {
                     case 1:
                     case 3:
                     case 5:
                     case 7:
                     case 8:
                     case 10:
                     case 12:
                          dayCount = 31;
                          break;
                     case 4:
                     case 6:
                     case 9:
                     case 11:
                          dayCount = 30;
                          break;
                     case 2:
                          dayCount = 28;
                          if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {
                              dayCount = 29;
                          }
                          break;
                     default:
                          break;
                }
    					
    			var daySel = $DaySelector.attr("rel");
                for (var i = 1; i <= dayCount; i++) {
    				var sed = daySel==i?"selected":"";
    				var dayStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";
                    $DaySelector.append(dayStr);
                 }
             }
          }
          $MonthSelector.change(function () {
             BuildDay();
          });
          $YearSelector.change(function () {
             BuildDay();
          });
    	  if($DaySelector.attr("rel")!=""){
    		 BuildDay();
    	  }
       } // End ms_DatePicker
    });
    })(jQuery);
    

    在.html文件的head内导入script

    <script type="text/javascript" src="js/jquery.time.js"></script>
    <script type="text/javascript" src="js/birthday.js"></script>
    

    主体部分的年月日组件代码

    <select class="sel_year" name="YYYY">
    	<option value="">请选择</option>
    </select>
    <font>年</font>
    <select class="sel_month" name="MM">
    	<option value="">请选择</option>
    </select>
    <font>月</font>
    <select class="sel_day" name="DD">
    	<option value="">请选择</option>
    </select>
    <font>日</font>
    
    展开全文
  • 可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用JS实现年、月、3个下拉框的...
  • 本文实例讲述了jQuery实现动态生成年月日级联下拉列表。分享给大家供大家参考,具体如下: html代码: <form name="form1" id="dateForm"> <select name="year"></select>年 <select name=...
  • html年月日三下拉框联动

    热门讨论 2010-04-10 23:15:12
    简单实用的代码html年月日三下拉框联动
  • title>年月日三下拉框联动title> meta http-equiv='Content-Type' content='text/html; charset=gb2312'> head> body> form name="reg_testdate"> select name="YYYY" onchange="YYYYDD(this.value)"> opt
    <html>
    <head>
    <title>年月日三下拉框联动</title>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    </head>
    
    <body>
    <form name="reg_testdate">
      <select name="YYYY" onchange="YYYYDD(this.value)">
        <option value="">请选择 年</option>
      </select>
      <select name="MM" onchange="MMDD(this.value)">
        <option value="">选择 月</option>
      </select>
      <select name="DD">
        <option value="">选择 日</option>
      </select>
    </form>
    <script language="JavaScript"><!--   
       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.reg_testdate.YYYY.options.add(new Option(" "+ i +" 年", i));   
        
               //赋月份的下拉框   
               for (var i = 1; i < 13; i++)   
                       document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));   
        
               document.reg_testdate.YYYY.value = y;   
               document.reg_testdate.MM.value = new Date().getMonth() + 1;   
               var n = MonHead[new Date().getMonth()];   
               if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;   
                    writeDay(n); //赋日期下拉框Author:meizz   
               document.reg_testdate.DD.value = new Date().getDate();   
       }   
       if(document.attachEvent)   
           window.attachEvent("onload", YYYYMMDDstart);   
       else   
           window.addEventListener('load', YYYYMMDDstart, false);   
       function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)   
       {   
               var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;   
               if (MMvalue == ""){ var e = document.reg_testdate.DD; optionsClear(e); return;}   
               var n = MonHead[MMvalue - 1];   
               if (MMvalue ==2 && IsPinYear(str)) n++;   
                    writeDay(n)   
       }   
       function MMDD(str)   //月发生变化时日期联动   
       {   
            var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;   
            if (YYYYvalue == ""){ var e = document.reg_testdate.DD; optionsClear(e); return;}   
            var n = MonHead[str - 1];   
            if (str ==2 && IsPinYear(YYYYvalue)) n++;   
           writeDay(n)   
       }   
       function writeDay(n)   //据条件写日期的下拉框   
       {   
               var e = document.reg_testdate.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 && (year%100 !=0 || year%400 == 0));}   
       function optionsClear(e)   
       {   
            e.options.length = 1;   
       }   
       //--></script>
    </body>
    </html>

    效果图

    展开全文
  • 实现一个日期下拉菜单

    千次阅读 2021-06-14 06:23:38
    这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理...年份: 一般来说有一个有效年份,比如说1900年至当前年份才是为效的,这个要根据实际需求来确定,如果是该下拉菜单是用来选择出生年月...

    这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单。本文调试环境为IE6/firefox1.5。

    首先来分析一下日期下拉菜单的需求。建议大家在写任何程序的时候都应该在动手编程之前想清楚自己需要些什么,这样编程才有效率。

    年份: 一般来说有一个有效年份,比如说1900年至当前年份才是为效的,这个要根据实际需求来确定,如果是该下拉菜单是用来选择出生年月日还得把最大的年份减到一定的数目,如果有人的生日选择了2005年(即当前的年份),那是不正常的。

    月份:没有什么特殊需求,不管是哪一年都是有十二个月。

    天数:每个月的天数都可能是不定的,当然这可以根据一定的算法求出来,而它的根据就是当前选择的年份和月份。月份都有一个固定的天数,即一、三、五、七、八、十、十二月是三十一天,而四、六、九、十一月是三十天,二月份要根据当年是否为闰年判断是二十八天还是二十九天。求当月的天数我提出一个比较简单的算法,可以只根据当前的年份和月份就可以求出当月的天数,这会在后边讲一讲思路并将其实现。

    好了,现在我们来具体实现这个日期联动下拉菜单。

    联动下拉菜单是以两个或多个select元素为单位的,为了让这些菜单更多紧密的工作,我们可以实现一个类用来管理它们的初始化、事件,在这里就使用DateSelector为类名,它有三个属性,分别为年、月、日的下拉菜单,而这三个select元素是由构造函数的参数传进来的,另外为了更灵活地使用它,我们还可以再给DateSelector类的构造函数增加一个(Date对象)或三个参数(int数值),表示初始化的年月日。由于参数个数不定,我们可以不将另外增加的参数写入参数表里,而是在运行时判断arguments对象的length属性来执行不同的操作。arguments对象存储了当前函数的参数信息,可以查阅一下相关的资料比如说《Windows脚本技术》。

    如何实现一个日期下拉菜单

    function DateSelector(selYear, selMonth, selDay)

    {

    this.selYear = selYear;

    this.selMonth = selMonth;

    this.selDay = selDay;

    }

    接下来开始对联动菜单进行初始化,首先是年份,我们可以给类增加一个MinYear属性表示最小的年份,再增加一个MaxYear表示最大的年份,实现一个InitYearSelect方法初始化年份,实现一个InitMonthSelect方法初始化月份。由于这几个属性和方法的思路都是很简单,就不一一讲解,看看代码是怎么写的应该就能够明白,如果对类方面有不清楚有地方可以参考我发表在无忧脚本另一篇文章《由浅到深了解JavaScript类》。

    如何实现一个日期下拉菜单

    function DateSelector(selYear, selMonth, selDay)

    {

    this.selYear = selYear;

    this.selMonth = selMonth;

    this.selDay = selDay;

    this.InitYearSelect();

    this.InitMonthSelect();

    }

    // 增加一个最大年份的属性

    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);

    }

    }

    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);

    接下来要对天数进行初始化了,前边有说过天数是不定的,那要如何准确求出它的天数呢?我们稍加分析就知道每个月的最后一天就是该月的天数,相当于下一个月的第一天的前一天,比如说我们要求2005年11月的天数,那我们只需要得到2005年12月一日的前一天即可得到2005年11月最后一天。可以给DateSelector添加一个方法DaysInMonth来实现该功能。

    如何实现一个日期下拉菜单

    function DateSelector(selYear, selMonth, selDay)

    {

    this.selYear = selYear;

    this.selMonth = selMonth;

    this.selDay = selDay;

    this.InitYearSelect();

    this.InitMonthSelect();

    }

    // 增加一个最大年份的属性

    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();

    }

    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);

    alert("2004年2月的天数为" + DateSelector.DaysInMonth(2004, 2));

    alert("2005年2月的天数为" + DateSelector.DaysInMonth(2005, 2));

    很明显,这种方法根本不需要考虑到该年份是否为闰年就可以轻松求出指定月的天数。另外,有些网友可能会对“var date = new Date(year, month, 0);”这句代码觉得奇怪,传入的是2005,2,0,这看起来似乎是求二月份第一天的前一天即一月份的最后一天,为什么还会得到二月份的天数?这里必须说明一天,JavaScript的Date对象里的月份是由0开始到11结束,也就是说0表示一月,2表示三月,所以就有这种错觉,在使用JavaScript的Date对象时要特别注意这一点。

    出处:蓝色理想

    责任编辑:moby

    ◎进入论坛网页制作、网站综合版块参加讨论

    展开全文
  • 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++) //以今年为准,前...
  • 前端代码下拉选择框显示年月日

    万次阅读 2018-01-31 14:10:11
    选择 年 选择 月 选择
  • // 获取当前年月日 var year = today.getFullYear(); var month = today.getMonth(); var data = today.getDate(); window.onload = function(){ // 循环年份并且显示到页面 for( var i = year ; i >= year-40 ; i-...
  • HTML5之日历控件

    千次阅读 2021-06-11 09:07:44
    HTML5定义了几个与日期有关的新控件。...1、日期时间控件HTML代码:JS操作代码://获取日期控件对象var oTimer = document.getElementById("myTime");console.log(oTimer);//获取时间值字符串var value ...
  • 代码实现: <!DOCTYPE html> <html> <head> <title>注册页面</title> </head> <body> <!-- 表单,用于提交按钮,隐式提交 --> <form action="" method="post"&...
  • js时间控件(年月日时分秒)

    千次阅读 2021-06-12 18:36:26
    这部分是时间控件的的js代码,NewTime.jsvar bMoveable=true;var strFrame;document.writeln('');strFrame='';strFrame+='';strFrame+='var datelayerx,datelayery;';strFrame+='var bDrag;';strFrame+='function ...
  • 二、HTML代码 <h3>用js生成年月日三个下拉框,选择年月后动态加载日期,并默认选中最后一天</h3><br /> <div id="selectinput"> </div> 三、js $(function () { //插入下拉框 ...
  • month_day.function DateSelector(selYear, selMonth, selDay) {this.selYear = selYearthis.selMonth = selMonththis.selDay = selDaythis.selYear.Group = thisthis.selMonth.Group = this// 给年份、月份下拉菜单...
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 一:图片预览: 二:js代码如下: ...[html]view plaincopy ...html>...年月日三下拉框联动</title> <metahttp-equiv=...
  • 在网页中,下拉列表是一种很常见的显示效果,你知道在html代码中是怎样实现的吗?今天小编要介绍的就是跟下拉列表有关的一个标签,即option标签。“option”作为英文单词有“选项”的意思,那它作为html中的标签又...
  • html5 多种日期选择框

    2015-12-10 20:52:35
    20150914041959742.zip,css,mobiscroll.custom-2.5.2.min.css,wp_icons_light.png,wp_icons.png,js,mobiscroll.custom-2.5.2.min.js,2.html,dev,css,mobiscroll.sense-ui-2.5.1.css,mobiscroll.jqm-2.5.1.css,...
  • 纯JS实现出生日期[年月日]下拉菜单在制作网页时,可能需要给用户提供注册帐号页面,用户注册 设计很多信息,其中就有 关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,360
精华内容 944
关键字:

html年月日下拉代码