年月日三级联动六级联动

1 问题介绍

最近在开发中遇到一个日期选择的问题,一开始只需要写一个三级联动的年月日下拉框,效果就像这样

没写css样式,请忽略丑度,直接上手撸代码,代码逻辑挺简单的,就主要用了new option(),来创建option,和使用Date判断当前月的天数ps:(偷懒没写判断闰年)

1:动态创建option

this.day.options.add(new Option(i+"日",i));

主要就是这种方式动态的创建option,使用select添加option
2:使用Date判断是否是闰年

YMD.getCountDays=function (year,month) {
    month = parseInt(month,10);
    var temp = new Date(year,month,0);
    return temp.getDate();
};

这里主要的就是两种方法,使用Date的构造方法,第三个参数0的意思,就是查出month上一个月的最后一天,也就是上个月有多少天,注意:Date 中的month 是从0-11
3:逻辑问题
这方面三级联动没什么需要注意的,只要注意月下拉框有值的前提就是选择了年,日下拉框有值的前提就是年和月下拉框都有值

---

2 六级联动日期下拉框

1:本来三级联动写完没事了,结果这边代码刚写完,需求变了,变成六级联动了.只想说MMP,六级联动的效果大概就是这样的

看到从…到…就应该明白什么意思了,就是一个日期范围,一开始觉得直接添就行了啊,结果发现没那么简单,研究发现主要就是日期大小问题,后面的不能小于前面的日期,这也就是只要前面的下拉框只要变化,后面的下拉框也要跟变,你不能选一个比前面小的日期吧,其他的问题都很好解决

2 :代码越改越乱,直接删了重新封装,这里就不贴代码了,就写一下使用方法

年月日三级联动

html格式

<select name="" id="year"></select>
<select name="" id="month"></select>
<select name="" id="day"></select>

js使用方法

<script>
 var ymd=new YMD('year','month','day');
 ymd.init();
</script>

年月日六级联动

html格式

<select name="" id="year"></select>
<select name="" id="month"></select>
<select name="" id="day"></select>
<br>
<select name="" id="year1"></select>
<select name="" id="month1"></select>
<select name="" id="day1"></select>
<script src="src/index.js"></script>

##js使用方法

<script>
//后面日期的select
 var ymd1=new YMD('year1','month1','day1');
 ymd1.initA();
 // 前面日期的select
 var ymd=new YMD('year','month','day',ymd1);
 ymd.init();
</script>

github