<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>模拟苹果手机日期插件</title>
<style>
*{
margin: 0;padding: 0;
list-style: none;
}
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>
<section id="dateArea" class="flex vertical dateArea">
<h4>请选择出生日期</h4>
<div class="dateContent ">
<div id="touch" class="selected flex horizontals">
<section data-handler="year"><span></span></section>
<section data-handler="month"><span></span></section>
<section data-handler="day"><span></span></section>
</div>
<div id="con" class="flex horizontals con">
<section data-class="year">
</section>
<section data-class="month">
</section>
<section data-class="day">
</section>
</div>
</div>
<div class="dateOperation flex horizontals">
<input type="hidden" data-val="getData" value=""/>
<section class=""><input name="cancel" type="button" value="取消"/></section>
<section class=""><input name="determine" type="button" value="确定"/></section>
</div>
</section>
<script>
(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>