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));
实现效果如下图:
从效果图可看出,选择不同的月份,呈现不同的天数。
在整个过程中,如果未定义当前月份或年份的日期,则为空,效果如下图:
注:自定义的日期数组都包括在函数中,方便改变日期,灵活性也高。