JS实现自己想要日期级联的某年某月的天数

                              JS实现自己想要日期级联的某年某月的天数

       有时候，我们并不想要每个月天数一样，或者是不需要非得根据年月来实现该月有多少天，想要实现每个月有几天由自己定义。在这里我实现了一个这样的日期级联，定义属于自己的日期。

    使用的初始的日期级联的网址是：http://www.cnblogs.com/xcxc/archive/2013/03/11/2953556.html

    首先说一下我实现的思想，自定义属于自己想要的日期数组，主要用到了JavaScript，使用的方法是字符串的截取（substr()）以及将字符串转化为整数（parseInt()）。

     如何实现年份和月份的下拉列表就不说了 ，以上的网址中，代码很全，简单易懂，很适合初学前端人员借鉴（就比如说我），我是在这个日期级联的基础上做的更改，大家可以参考。

    主要有三个地方需要我们自定义呈现的天数，第一个是初始面板显示的年月日，想要的效果是，当我们在浏览器运行时，当前年月就会呈现自己想要的天数，实现效果见下图。

       初始面板是怎么实现的呢？首先我们要获取当前年份和月份，把年份和月份使用toString()函数转化为字符串，再将年份和月份组成一个字符串如这种形式：“yyyy-mm”。然后定义属于自己想要的日期数组，使用sort()函数将数组排序，方便一会查找，计算出数组的长度。接着我们来一个循环，循环里面主要是使用substr()函数截取数组中每个形如“yyyy-mm”的串，将该串与我们最初把年月转化为字符串的串作比较，如果相等，则把日期数组中的该日期的最后两位截取出来，然后使用parseInt()函数转化为整数并存入一个只存当前年月天数的数组中，循环结束后，输出该数组即可。该过程的代码如下：

           var currdate=new Date();
            var curryear=currdate.getFullYear();
            var currmonth=currdate.getMonth()+1;

            var origdate=new Array();
             origdate=['2016-12-01','2016-11-05','2016-12-06','2016-12-11','2016-10-08','2015-12-25'];
             origdate.sort();
             len=origdate.length;
             curryear=curryear.toString();
             currmonth=currmonth.toString();
             curryandm=curryear+'-'+currmonth;
             arrdate=new Array();
             arrdate[0]=0;
             var j=0;
             for(var i=0;i<len;i++){
                 var arryandm=origdate[i].substr(0,7);
                 if(arryandm==curryandm){
                      arrdate[j++]=parseInt(origdate[i].substr(8,2));
                 }
             }
             var e = document.reg_testdate.DD; optionsClear(e);
            for (var i=0; i<j; i++)
                e.options.add(new Option(" "+arrdate[i] + " 日", i));

该过程实现的效果如下图：

    

       第二个需要实现的地方是，当我们选择年份查看该月的天数时，该月的天数的呈现会发生变化，这时候我们需要一个onchange()事件，意思是当年份发生变化时，日期会怎么变化呢？在该事件中我们定义了一个函数，在这个函数中，我们实现类似于初始面板实现的过程，与之不同的是，我们不需要获取当前年份和月份。函数中的参数传递了当前的年份，在该函数中，我们获取月份的值即可，然后与上面介绍的一样，也是年份和月份转化为字符串，与日期数组中所截取的年份月份作比较，找出当前年月所呈现的天数，然后输出该数组。实现代码如下：

            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 origdate=new Array();
             origdate=['2016-12-01','2016-11-05','2016-12-06','2016-12-11','2016-10-08','2015-12-25'];
             origdate.sort();
             len=origdate.length;
             var curryear=str.toString();
             var currmonth=MMvalue.toString();
             var curryandm=curryear+'-'+currmonth;
             var arrdate=new Array();
             arrdate[0]=0;
             var j=0;
             for(var i=0;i<len;i++){
                 var arryandm=origdate[i].substr(0,7);
                 if(arryandm==curryandm){
                      arrdate[j++]=parseInt(origdate[i].substr(8,2));
                 }
             }
             var e = document.reg_testdate.DD; optionsClear(e);
            for (var i=0; i<j; i++)
                e.options.add(new Option(" "+arrdate[i] + " 日", i));

实现效果如下图：

从效果图可看出，选择不同的年份，月份的日期会出现自己定义的天数。

      第三部分需要实现的是当我们选择月份时，日期会发生的变化，这个过程类似于年份发生改变时，日期的变化，就不多赘述了。实现代码如下：

           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 origdate=new Array();
             origdate=['2016-12-01','2016-11-05','2016-12-06','2016-12-11','2016-10-08','2015-12-25'];
             origdate.sort();
             len=origdate.length;
             var curryear=YYYYvalue.toString();
             var currmonth=str.toString();
             var curryandm=curryear+'-'+currmonth;
             var arrdate=new Array();
             arrdate[0]=0;
             var j=0;
             for(var i=0;i<len;i++){
                 var arryandm=origdate[i].substr(0,7);
                 if(arryandm==curryandm){
                      arrdate[j++]=parseInt(origdate[i].substr(8,2));
                 }
             }
             var e = document.reg_testdate.DD; optionsClear(e);
            for (var i=0; i<j; i++)
                e.options.add(new Option(" "+arrdate[i] + " 日", i));

实现效果如下图：

从效果图可看出，选择不同的月份，呈现不同的天数。

在整个过程中，如果未定义当前月份或年份的日期，则为空，效果如下图：

注：自定义的日期数组都包括在函数中，方便改变日期，灵活性也高。