日曆||三級聯動

時間 2019-11-19

標籤日曆三級聯動简体版

原文原文鏈接

<!DOCTYPE html>html

<html>web

<head>dom

<title>模擬蘋果手機日期插件</title>spa

<style>插件

*{scala

margin: 0;padding: 0;htm

list-style: none;ip

}

body{background-color: #f4f4f4;}

.flex{

overflow: hidden;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: flex;

display: -webkit-box;

display: -moz-box;

display: -ms-box;

display: box;

}

.vertical{

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

-ms-box-orient: vertical;

box-orient: vertical;

}

.horizontals{

-webkit-box-orient: horizontal;

-moz-box-orient: horizontal;

-ms-box-orient: horizontal;

box-orient: horizontal;

}

.dateArea{

position: relative;

left: 0;top: 0;bottom: 0;right: 0;

margin: 0 auto;

width: 80%;

height: 283px;

background-color: #f4f4f4;

}

.dateTitle,.dateContent,.dateOperation{

width: 100%;

}

.dateTitle{

margin: 0 auto;

width:100%;height: 40px;

line-height: 40px;

text-align: center;

border-bottom: 1px solid #f4f4f4;

background-color: #fff;

}

.dateContent{

position: relative;

left: 0;top: 0;right: 0;bottom: 0;

-webkit-box-flex:1;

-moz-box-flex:1;

-ms-box-flex:1;

box-flex:1;

background-color: #fff;

border: 1px solid #f4f4f4;

}

.dateContent div.selected{

position: absolute;

top: 0;left: 0;

width: 100%;

height: 100%;

z-index: 100;

}

.dateContent div.selected section{

-webkit-box-flex:1;

-moz-box-flex:1;

-ms-box-flex:1;

box-flex:1;

height: 100%;

background-color: #000;

opacity: 0.1;

}

.dateContent div.selected section span{

display: block;

position: relative;top: 80px;

width: 100%;

height: 38px;

line-height: 38px;

text-align: center;

border-bottom: 1px solid transparent;

border-top: 1px solid transparent;

background-color: #fff;

opacity: 1;

}

.dateContent div.con{height: 200px;}

.dateContent div.con section{

-webkit-box-flex:1;

-moz-box-flex:1;

-ms-box-flex:1;

box-flex:1;

overflow: hidden;

position: relative;

left: 0;top: 0;right: 0;bottom: 0;

}

.dateContent div.con section ul{

position: relative;

left: 0;

width: 100%;

transition: all 1s;

}

.dateContent div.con section ul li span{

display: block;

width: 100%;

height: 38px;

line-height: 38px;

text-align: center;

border-bottom: 1px solid #fff;

border-top: 1px solid #fff;

/*color: #ccc;*/

}

.dateContent div.con section[data-class="month"]{

border-right: 1px solid #9cf;

border-left: 1px solid #9cf;

}

.dateOperation{

height: 40px;

background-color: #cccccc;

}

.dateOperation section{

-webkit-box-flex:1;

-moz-box-flex:1;

-ms-box-flex:1;

box-flex:1;

height: 100%;

text-align: center;

border: 1px solid #f4f4f4;

}

.dateOperation section input[type='button']{

width: 100%;

height: 100%;

line-height: 100%;

outline: none;

border: none;

background-color: #fff;

}

</style>

</head>

<body>

<h4>請選擇出生日期</h4>

</div>

</section>

</section>

</section>

</div>

</div>

</section>

(function(){

var dateArea = document.getElementById('dateArea'),

dataClassYear = dateArea.querySelector('section[data-class="year"]'),

dataClassMonth = dateArea.querySelector('section[data-class="month"]'),

dataClassDay = dateArea.querySelector('section[data-class="day"]');

var areaData = [

{"area":"四川","data":[

{"city":"成都","data":[{"smallCity":"高新區"},{"smallCity":"新都"},{"smallCity":"青羊區"},{"smallCity":"金牛區"},{"smallCity":"溫江"}]},

{"city":"宜賓","data":[{"smallCity":"宜賓1"},{"smallCity":"宜賓2"},{"smallCity":"宜賓3"},{"smallCity":"宜賓4"},{"smallCity":"宜賓5"}]},

{"city":"德陽","data":[{"smallCity":"德陽1"},{"smallCity":"德陽2"},{"smallCity":"德陽3"},{"smallCity":"德陽4"},{"smallCity":"德陽5"}]},

{"city":"遂寧","data":[{"smallCity":"遂寧1"},{"smallCity":"遂寧2"},{"smallCity":"遂寧3"},{"smallCity":"遂寧4"},{"smallCity":"遂寧5"}]},

{"city":"雅安","data":[{"smallCity":"雅安1"},{"smallCity":"雅安2"},{"smallCity":"雅安3"},{"smallCity":"雅安4"},{"smallCity":"雅安5"}]},

{"city":"南充","data":[{"smallCity":"高坪"},{"smallCity":"經開區"},{"smallCity":"新都"},{"smallCity":"高坪"},{"smallCity":"經開區"}]}

]},

{"area":"河北","data":[

{"city":"北京","data":[{"smallCity":"高新區"},{"smallCity":"新都"},{"smallCity":"青羊區"},{"smallCity":"金牛區"},{"smallCity":"溫江"}]},

{"city":"石家莊","data":[{"smallCity":"石家莊1"},{"smallCity":"石家莊2"},{"smallCity":"石家莊3"},{"smallCity":"石家莊4"},{"smallCity":"石家莊5"}]}

]},

{"area":"浙江","data":[

{"city":"杭州","data":[{"smallCity":"龍泉"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"}]},

{"city":"蘇州","data":[{"smallCity":"龍泉1"},{"smallCity":"新都2"},{"smallCity":"新都3"},{"smallCity":"新都4"},{"smallCity":"新都5"}]}

]},

{"area":"山東","data":[

{"city":"成都a","data":[{"smallCity":"龍泉a1"},{"smallCity":"新都a2"},{"smallCity":"新都a3"},{"smallCity":"新都a4"},{"smallCity":"新都a5"}]},

{"city":"成都b","data":[{"smallCity":"龍泉b1"},{"smallCity":"新都b2"},{"smallCity":"新都b3"},{"smallCity":"新都b4"},{"smallCity":"新都b5"}]},

{"city":"成都c","data":[{"smallCity":"龍泉c1"},{"smallCity":"新都c2"},{"smallCity":"新都c3"},{"smallCity":"新都c4"},{"smallCity":"新都c5"}]},

{"city":"成都d","data":[{"smallCity":"龍泉d1"},{"smallCity":"新都d2"},{"smallCity":"新都d3"},{"smallCity":"新都d4"},{"smallCity":"新都d5"}]},

{"city":"成都e","data":[{"smallCity":"龍泉e1"},{"smallCity":"新都e2"},{"smallCity":"新都e3"},{"smallCity":"新都e4"},{"smallCity":"新都e5"}]},

{"city":"南充f","data":[{"smallCity":"高坪f1"},{"smallCity":"經開區f2"},{"smallCity":"新都f3"},{"smallCity":"高坪f4"},{"smallCity":"經開區f5"}]}

]},

{"area":"黑龍江","data":[

{"city":"成都1","data":[{"smallCity":"龍泉"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"}]},

{"city":"成都2","data":[{"smallCity":"龍泉"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"}]},

{"city":"成都3","data":[{"smallCity":"龍泉"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"}]},

{"city":"成都4","data":[{"smallCity":"龍泉"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"}]},

{"city":"成都5","data":[{"smallCity":"龍泉"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"},{"smallCity":"新都"}]},

{"city":"南充6","data":[{"smallCity":"高坪"},{"smallCity":"經開區"},{"smallCity":"新都"},{"smallCity":"高坪"},{"smallCity":"經開區"}]}

]},

{"area":"雲南","data":[

{"city":"成都h","data":[{"smallCity":"龍泉h1"},{"smallCity":"新都h2"},{"smallCity":"新都h3"},{"smallCity":"新都h4"},{"smallCity":"新都h5"}]},

{"city":"成都j","data":[{"smallCity":"龍泉j1"},{"smallCity":"新都j2"},{"smallCity":"新都j3"},{"smallCity":"新都j4"},{"smallCity":"新都j5"}]},

{"city":"成都k","data":[{"smallCity":"龍泉k1"},{"smallCity":"新都k2"},{"smallCity":"新都k3"},{"smallCity":"新都k4"},{"smallCity":"新都k5"}]},

{"city":"成都l","data":[{"smallCity":"龍泉l1"},{"smallCity":"新都l2"},{"smallCity":"新都l3"},{"smallCity":"新都l4"},{"smallCity":"新都l5"}]},

{"city":"成都m","data":[{"smallCity":"龍泉m1"},{"smallCity":"新都m2"},{"smallCity":"新都m3"},{"smallCity":"新都m4"},{"smallCity":"新都m5"}]},

{"city":"南充n","data":[{"smallCity":"高坪n1"},{"smallCity":"經開區n2"},{"smallCity":"新都n3"},{"smallCity":"高坪n4"},{"smallCity":"經開區n5"}]}

]},

{"area":"河南","data":[

{"city":"鄭州0","data":[{"smallCity":"新鄭01"},{"smallCity":"中牟02"},{"smallCity":"中牟03"},{"smallCity":"中牟04"},{"smallCity":"中牟05"}]},

{"city":"鄭州9","data":[{"smallCity":"新鄭91"},{"smallCity":"中牟92"},{"smallCity":"中牟93"},{"smallCity":"中牟94"},{"smallCity":"中牟95"}]},

{"city":"鄭州8","data":[{"smallCity":"新鄭88"},{"smallCity":"中牟89"},{"smallCity":"中牟80"},{"smallCity":"中牟86"},{"smallCity":"中牟87"}]},

{"city":"鄭州7","data":[{"smallCity":"新鄭77"},{"smallCity":"中牟78"},{"smallCity":"中牟79"},{"smallCity":"中牟76"},{"smallCity":"中牟70"}]},

{"city":"鄭州6","data":[{"smallCity":"新鄭66"},{"smallCity":"中牟67"},{"smallCity":"中牟68"},{"smallCity":"中牟69"},{"smallCity":"中牟60"}]},

{"city":"鄭州5","data":[{"smallCity":"新鄭51"},{"smallCity":"中牟52"},{"smallCity":"中牟53"},{"smallCity":"中牟54"},{"smallCity":"中牟55"}]}

]}

];

* 計算年份規則，根據年份來生成2月份的天數;

var dateObj = {

"getD":function(){

var s = new Date();

return s;

"yearFun":function(dateClassYear,dataClassMonth,dataClassDay){

var str = '',f = 0;

for(var i = 1900,len = this.getD().getFullYear();i<=len;i++){

if(i < len){

str += '<li><span class="">'+i+'年</span><input type="hidden" value="'+i+'"/></li>';

}else{

str += '<li><span class="active">'+i+'年</span><input type="hidden" value="'+i+'"/></li>';

break;

}

f++;

}

dateClassYear.innerHTML ='<ul>'+str+'</ul>';

dateClassYear.querySelector('ul').style.bottom = (f+(-2))*40+'px';

this.monthFun(dataClassMonth,this.getD().getFullYear(),this.getD().getMonth());

"monthFun":function(dataClassMonth,y,m){

var str = '';

for(var j = 0,n=this.getD().getMonth();;j++){

if(j == n){

str += '<li><span class="active">'+(j+1)+'月</span><input type="hidden" data-month="" value="'+(j+1)+'"/></li>';

}else{

str += '<li><span>'+(j+1)+'月</span><input type="hidden" data-month="" value="'+(j+1)+'"/></li>';

}

if(j==11){break;}

}

dataClassMonth.innerHTML ='<ul>'+str+'</ul>';

dataClassMonth.querySelector('ul').style.bottom =(this.getD().getMonth()+(-2))*40+'px';

this.dayFun(dataClassDay,y,m);

"dayFun":function(dataClassDay,year,month){

var str = '';

function daySum(month,s){

var d = 0,

str = '',

da = new Date();

d = (month%2 != 0)?(month != 1?(30):(s?29:28)):(31);

for(var i = 1,n = da.getDate();i<=d;i++){

if(i == n){

str += '<li><span class="active">'+(i)+'日</span><input type="hidden" data-year="" value="'+(i)+'"></li>';

}else{

str += '<li><span>'+(i)+'日</span><input type="hidden" data-year="" value="'+(i)+'"></li>';

}

return str;

}

//閏年29天平年28天;

str = ((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0))?daySum(month,true):daySum(month,false);

dataClassDay.innerHTML = '<ul>'+str+'</ul>';

dataClassDay.querySelector('ul').style.bottom = (this.getD().getDate()+(-3))*40+'px';

"area":function(dataClassYear,dataClassMonth,dataClassDay,area){

var str = '';

for(var i = 0,len = area.length;i<len;i++){

if(i ==0 ){

str += '<li><span class="active">'+area[i].area+'</span><input type="hidden" data-year="" value="'+area[i].area+'"/></li>';

this.city(dataClassYear,dataClassMonth,dataClassDay,area[i].data);

}else{

str += '<li><span class="">'+area[i].area+'</span><input type="hidden" data-year="" value="'+area[i].area+'"/></li>';

}

this.setCon(dataClassYear,str);

"city":function(dataClassYear,dataClassMonth,dataClassDay,area){

var str = '';

if(area instanceof Array){

for(var i= 0,len = area.length;i<len;i++){

if(i ==0 ){

str += '<li><span class="active">'+area[i].city+'</span><input type="hidden" value="'+area[i].city+'"/></li>';

this.smallCity(dataClassYear,dataClassMonth,dataClassDay,area[i].data);

}else{

str += '<li><span class="">'+area[i].city+'</span><input type="hidden" value="'+area[i].city+'"/></li>';

}

}else{

for(var j = 0,m = areaData.length;j<m;j++){

if(areaData[j].area == area){

for(var k= 0,n = areaData[j].data.length;k<n;k++){

if(k ==0 ){

str += '<li><span class="active">'+areaData[j].data[k].city+'</span><input type="hidden" value="'+areaData[j].data[k].city+'"/></li>';

this.smallCity(dataClassYear,dataClassMonth,dataClassDay,areaData[j].data[k].data);

}else{

str += '<li><span class="">'+areaData[j].data[k].city+'</span><input type="hidden" value="'+areaData[j].data[k].city+'"/></li>';

}

this.setCon(dataClassMonth,str);

"smallCity":function(dataClassYear,dataClassMonth,dataClassDay,area,c){

var str = '';

if(area instanceof Array){

for(var i= 0,len = area.length;i<len;i++){

if(i ==0 ){

str += '<li><span class="active">'+area[i].smallCity+'</span><input type="hidden" value="'+area[i].smallCity+'"/></li>';

}else{

str += '<li><span class="">'+area[i].smallCity+'</span><input type="hidden" value="'+area[i].smallCity+'"/></li>';

}

}else{

for(var j = 0,m = areaData.length;j<m;j++){

if(areaData[j].area == area){

for(var v = 0,a =areaData[j].data.length;v<a;v++){

if(areaData[j].data[v].city == c){

for(var k= 0,n = areaData[j].data[v].data.length;k<n;k++){

if(k ==0 ){

str += '<li><span class="active">'+areaData[j].data[v].data[k].smallCity+'</span><input type="hidden" value="'+areaData[j].data[v].data[k].smallCity+'"/></li>';

}else{

str += '<li><span class="">'+areaData[j].data[v].data[k].smallCity+'</span><input type="hidden" value="'+areaData[j].data[v].data[k].smallCity+'"/></li>';

}

break;

}

break;

}

this.setCon(dataClassDay,str);

"setCon":function(con,str){

con.innerHTML = '<ul>'+str+'</ul>';

con.querySelector('ul').style.bottom = '-80px';

"cus":function(tag,area,y,m){

/**

* this.getAttribute("data-handler") ==> tag;

* area ==> 表示是不是區域選擇;

var dom = 'dataClass'+tag.slice(0,1).toUpperCase()+tag.substring(1, tag.length);

if(tag == "year" && area){

dom.innerHTML = "";

this.monthFun(dataClassMonth,y,m-1);

}else if(tag == "month" && area){

dom.innerHTML = "";

this.dayFun(dataClassDay,y,m-1);

}else if(tag == "year" && !area){

dom.innerHTML = "";

this.city(dataClassYear,dataClassMonth,dataClassDay,y);

}else if(tag == "month" && !area){

dom.innerHTML = "";

this.smallCity(dataClassYear,dataClassMonth,dataClassDay,y,m);

}

};

dateObj.yearFun(dataClassYear,dataClassMonth,dataClassDay);//日曆生成;

//dateObj.area(dataClassYear,dataClassMonth,dataClassDay,areaData);//區域選擇生成;

var EventUtil = {

addHandler:function(element,type,handler){

if(element.addEventListener){

element.addEventListener(type,handler,false);

}else if(element.attachEvent){

element.attachEvent("on"+type,handler);

}else{

element["on"+type] = handler;

}

removeHandler:function(element,type,handler){

if(element.removeEventListener){

element.removeEventListener(type,handler,false);

}else if(element.detachEvent){

element.detachEvent("on"+type,handler);

}else{

element["on"+type] = null;

}

};

var fun = {

"start":function(e){

this.status = true;

this.yS = e.changedTouches[0].clientY;

"move":function(e){

e.preventDefault();

"end":function(e){

var src = document.querySelector('section[data-class="'+this.getAttribute("data-handler")+'"]');

var srcEle = src.querySelector('ul'),

srcEleBot = parseInt(srcEle.style.bottom),

srcEleCon = srcEle.offsetHeight-120,

clientYe = e.changedTouches[0].clientY;

if(this.status){

var last = src.querySelector('.active').parentNode.nextSibling,

prev = src.querySelector('.active').parentNode.previousSibling;

if(this.yS > clientYe && srcEleBot < srcEleCon && srcEleBot >= -80){

srcEle.style.bottom = (srcEleBot+40)+'px';

if(last!=null){

src.querySelector('.active').parentNode.nextSibling.firstChild.setAttribute("class","active");

src.querySelectorAll('.active')[0].setAttribute("class","")}

}else if(this.yS < clientYe && srcEleBot <= srcEleCon && srcEleBot > -80){

srcEle.style.bottom = (srcEleBot-40)+'px';

if(prev!=null){

src.querySelector('.active').parentNode.previousSibling.firstChild.setAttribute("class","active");

src.querySelectorAll('.active')[1].setAttribute("class","");}

}

//根據移動項進行聯動;

var y = dataClassYear.querySelector('.active').nextElementSibling.value,

m = dataClassMonth.querySelector('.active').nextElementSibling.value;

dateObj.cus(this.getAttribute("data-handler"),true,y,m);//日期;

//dateObj.cus(this.getAttribute("data-handler"),false,y,m);//區域選擇

}

this.status = false;

}

};

var con = document.getElementById('touch'),

sec = con.getElementsByTagName('section');

for(var i = 0,n = sec.length;i<n;i++){

EventUtil.addHandler(sec[i],'touchstart',fun.start);

EventUtil.addHandler(sec[i],'touchmove',fun.move);

EventUtil.addHandler(sec[i],'touchend',fun.end);

}

var determine = document.querySelector('input[name="determine"]');

determine['onclick'] = function(){

var s = dataClassYear.querySelector('.active').nextElementSibling.value+"--"+dataClassMonth.querySelector('.active').nextElementSibling.value+"--"+dataClassDay.querySelector('.active').nextElementSibling.value+"";

confirm(s);

}

})();

</script>

</body>

</html>