JS实现时间控件

<ion-view view-title="" hide-nav-bar="true">

<ion-content>
<div>
开始时间 : <input type="text" placeholder="点击选择时间" style="display: inline-block;margin-left: 15px" size="22"
ng-click="setDateControl($event)" οnfοcus="this.blur();"/>
<hr size="1">
结束时间 : <input type="text" placeholder="点击选择时间" style="display: inline-block;margin-left: 15px" size="22"
ng-click="setDateControl($event)" οnfοcus="this.blur();"/>
<hr size="1">
查看附件:<li style="display: inline-block;" ng-click=""></li>
</div>
<!-- <input type="datetime-local"/> -->
<div class="dateDiv">
<div class="dateMask" style="position: absolute; top: 0px; opacity:0.3; background-color: #777; z-index: 2; left: 0px; display: none;">
</div>
<div class="dateControl" style="position: absolute;z-index: 3;background-color: white;display: none;" data-ng-init="load($event)">
<div class="divYear" style="display: inline-block; width: 14%;margin-left: 12%;font-size: 130%;margin-top: 20px" on-swipe-up="swipeUpFunction($event);"
on-swipe-down="swipeDownFunction($event);" ng-click="swipeUpFunction($event);">
<li align="center" class ="topYear" style="list-style-type:none;">2015</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" class ="middleYear" style="list-style-type:none;">2016</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" class ="bottomYear" style="list-style-type:none;">2017</li>
</div>
<div style="display: inline-block; width: 2%;font-size: 130%">
<li align="center" style="list-style-type:none;"> </li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" style="list-style-type:none;">-</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" style="list-style-type:none;"> </li>
</div>
<div class="divMonth" style="display: inline-block; width: 10%;font-size: 130%" on-swipe-up="swipeUpFunction($event)"
on-swipe-down="swipeDownFunction($event)" ng-click="swipeUpFunction($event)">
<li align="center" class ="topMonth" style="list-style-type:none;">03</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" class ="middleMonth" style="list-style-type:none;">04</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" class ="bottomMonth"style="list-style-type:none;">05</li>
</div>
<div style="display: inline-block; width: 2%;font-size: 130%">
<li align="center" style="list-style-type:none;"> </li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" style="list-style-type:none;">-</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" style="list-style-type:none;"> </li>
</div>
<div class="divDay" style="display: inline-block; width: 10%;font-size: 130%" on-swipe-up="swipeUpFunction($event)"
on-swipe-down="swipeDownFunction($event)" ng-click="swipeUpFunction($event)">
<li align="center" class ="topDay" style="list-style-type:none;">01</li>
<HR width="100%" SIZE=2 color="blue">
<li align="center" class ="middleDay" style="list-style-type:none;">02</li>
<HR width="100%" SIZE=2 color="blue">
<li align="center" class ="bottomDay" style="list-style-type:none;">03</li>
</div>
<div style="display: inline-block; width: 4%;font-size: 130%">
<li align="center" style="list-style-type:none;"> </li>
<li align="center" style="list-style-type:none;"> </li>
<li align="center" style="list-style-type:none;"> </li>
</div>
<div class="divHour" style="display: inline-block; width: 10%;font-size: 130%" on-swipe-up="swipeUpFunction($event)"
on-swipe-down="swipeDownFunction($event)" ng-click="swipeUpFunction($event)">
<li align="center" class ="topHour" style="list-style-type:none;">12</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" class ="middleHour" style="list-style-type:none;">13</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" class ="bottomHour" style="list-style-type:none;">14</li>
</div>
<div style="display: inline-block; width: 2%;font-size: 130%">
<li align="center" style="list-style-type:none;"> </li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" style="list-style-type:none;">:</li>
<HR width="200%" SIZE=2 color="blue">
<li align="center" style="list-style-type:none;"> </li>
</div>
<div class="divMinute" style="display: inline-block; width: 10%;margin-right: 5%;font-size: 130%" on-swipe-up="swipeUpFunction($event)"
on-swipe-down="swipeDownFunction($event)" ng-click="swipeUpFunction($event)">
<li align="center" class ="topMinute" style="list-style-type:none;">23</li>
<HR width="100%" SIZE=2 color="blue">
<li align="center" class ="middleMinute" style="list-style-type:none;">24</li>
<HR width="100%" SIZE=2 color="blue">
<li align="center" class ="bottomMinute" style="list-style-type:none;">25</li>
</div>
<br>
<br>
<button style="display: inline-block;float:left;width: 50%;height: 50px" ng-click="dateCancel($event)">取消</button>
<button style="display: inline-block;float:right;width: 50%;height: 50px" ng-click="dateConfirm($event)">确认</button>
</div>
</div>
<div ng-controller="commonControlCtrl" style="display: none">
<hr width="100%" size="2">
<h4>附件</h4>
<div ng-repeat="doc in docs" style="font-size: 120%">

<img width="48px" ng-src="{{doc.image}}" height="48px" border="1px" />
<ul style="display: inline-block;margin-left: 20px">
<a><li style="white-space:nowrap;text-overflow:ellipsis;overflow: hidden;width:150px">{{doc.docName}}</li></a>
<li style="margin-top: 8px;font-size: 70%">{{doc.docSize}}</li>
</ul>
<ul style="display: inline-block;font-size: 80%;float:right;margin-right:30px;margin-top:30px;text-align:right">{{doc.createDate}}</ul>
<hr width="100%" size="1">
<!-- <img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>

<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list> -->
</div>
</div>
<!--
<div style="font-size: 120%;margin-top: 20px">
<hr width="100%" size="2">
<h4>附件</h4>
<img width="48px" src="img/adam.jpg" height="48px" border="1px" />
<ul style="display: inline-block;margin-left: 20px">
<li><a>abc.txt</a></li>
<li style="margin-top: 8px;font-size: 70%">256k</li>
</ul>
<ul style="display: inline-block;font-size: 80%;float:right;margin-right:30px;margin-top:30px;text-align:right">2015/06/30</ul>


<hr width="100%" size="1">
<img width="48px" src="img/adam.jpg" height="48px" border="1px" />
<ul style="display: inline-block;margin-left: 20px">
<li><a>abc.txt</a></li>
<li style="margin-top: 8px;font-size: 70%">256k</li>
</ul>
<ul style="display: inline-block;font-size: 80%;float:right;margin-right:30px;margin-top:30px;text-align:right">2015/06/30</ul>

<hr width="100%" size="1">
<img width="48px" src="img/adam.jpg" height="48px" border="1px" />
<ul style="display: inline-block;margin-left: 20px">
<li><a>012345678901.excel</a></li>
<li style="margin-top: 8px;font-size: 70%">256k</li>
</ul>
<ul style="display: inline-block;font-size: 80%;float:right;margin-right:30px;margin-top:30px;text-align:right">2015/06/30</ul>
<hr width="100%" size="1">
<img width="48px" src="img/adam.jpg" height="48px" border="1px" />
<ul style="display: inline-block;margin-left: 20px">
<li><a>abcdefghijkl.excel</a></li>
<li style="margin-top: 8px;font-size: 70%">256k</li>
</ul>
<ul style="display: inline-block;font-size: 80%;float:right;margin-right:30px;margin-top:30px;text-align:right">2015/06/30</ul>
</div>
-->
<div style="display: none">
<!-- 头 -->
<div style="height:70px;width: 100%;background-color: #E9E9E9;" ng-click="upDownClick($event)">
<li style="display: inline-block;margin-left: 30px;margin-top:25px;font-size: 120%">会签/审批意见</li>
<li class="upClick" style="display: none;font-size: 180%;float: right;margin-top:30px;margin-right: 30px">^</li>
<li class="downClick" style="display: inline-block;font-size: 180%;float: right;margin-top:30px;margin-right: 30px">></li>
</div>
<!-- 体 <textarea rows="10" cols="100%" style="display: none"></textarea>-->
<div></div>
<!-- 尾 -->
<div class="ereaDiv" style="height: 15px;width:100%;background-color: #C9C9C9;"></div>
</div>


<!--
<div align="center">
<ul>
<li style="display: inline-block; width: 11%"></li>
<li style="display: inline-block; width: 12%"><input type="text" value="2015" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="02" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="29" disabled="disabled"></li>
<li style="display: inline-block; width: 3%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="19" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="03" disabled="disabled"></li>
<li style="display: inline-block; width: 18%"></li>
</ul>
<HR width="70%" SIZE=2>
<ul>
<li style="display: inline-block; width: 11%"></li>
<li style="display: inline-block; width: 12%"><input type="text" value="2015" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"><label >- </label></li>
<li style="display: inline-block; width: 8%"><input type="text" value="02" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"><label >- </label></li>
<li style="display: inline-block; width: 8%"><input type="text" value="29" disabled="disabled"></li>
<li style="display: inline-block; width: 3%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="19" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"><label>:  </label></li>
<li style="display: inline-block; width: 8%"><input type="text" value="03" disabled="disabled"></li>
<li style="display: inline-block; width: 18%"></li>
</ul>
<HR width="70%" SIZE=2>
<ul>
<li style="display: inline-block; width: 11%"></li>
<li style="display: inline-block; width: 12%"><input type="text" value="2015" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="02" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="29" disabled="disabled"></li>
<li style="display: inline-block; width: 3%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="19" disabled="disabled"></li>
<li style="display: inline-block; width: 4%"></li>
<li style="display: inline-block; width: 8%"><input type="text" value="03" disabled="disabled"></li>
<li style="display: inline-block; width: 18%"></li>
</ul>
</div> -->
<!--
<tr>
<td align="center" style="display: inline-block; width: 18%"></td>
<td align="center" style="display: inline-block; width: 12%"><input type="text" value="2015" disabled="disabled"></td>
<td align="center" style="display: inline-block; width: 4%"></td>
<td align="center" style="display: inline-block; width: 8%"><input type="text" value="02" disabled="disabled"></td>
<td align="center" style="display: inline-block; width: 4%"></td>
<td align="center" style="display: inline-block; width: 8%"><input type="text" value="29" disabled="disabled"></td>
<td align="center" style="display: inline-block; width: 3%"></td>
<td align="center" style="display: inline-block; width: 8%"><input type="text" value="19" disabled="disabled"></td>
<td align="center" style="display: inline-block; width: 4%"></td>
<td align="center" style="display: inline-block; width: 8%"><input type="text" value="03" disabled="disabled"></td>
<td align="center" style="display: inline-block; width: 18%"></td>
</tr> -->
<!--
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
-->
<!--
<div>
<ion-slide-box active-slide="myActiveSlide">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
</div>
-->
</ion-content>
</ion-view>
----------------------------------------------------------------------
//两个参数是定义模块,第2个参数为依赖的其他模块,可以为空数组
//angular.module('html5.sysman.controllers', [])
//一个参数,表示查找已经定义好的模块,再添加新功能
//angular.module('html5.sysman.controllers')
angular.module('commoncontrol.controllers', [])

.controller(
'commonControlCtrl',
function($scope) {

$scope.$on('$ionicView.enter', function(e) {

});

$scope.load = function (){
var element = document.getElementsByClassName("dateControl")[0];
var child = element.getElementsByTagName("li");
var now = new Date();
for ( i in child) {

if(null != child[i].className && child[i].className.indexOf("Year") >= 0){

if(child[i].className.indexOf("top") >= 0){

child[i].innerHTML = (((now.getFullYear() - 1) < 1000) ? 9999 : (now.getFullYear() - 1));
}
if(child[i].className.indexOf("middle") >= 0){

child[i].innerHTML = now.getFullYear();
}
if(child[i].className.indexOf("bottom") >= 0){

child[i].innerHTML = (((now.getFullYear() + 1) > 9999) ? 1000 : (now.getFullYear() + 1));
}
}
if(null != child[i].className && child[i].className.indexOf("Month") >= 0){

if(child[i].className.indexOf("top") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getMonth() - 1) < 1) ? 12 : (now.getMonth() - 1)));
}
if(child[i].className.indexOf("middle") >= 0){

child[i].innerHTML = $scope.addZero2Str(now.getMonth());
}
if(child[i].className.indexOf("bottom") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getMonth() + 1) > 12) ? 1 : (now.getMonth() + 1)));
}
}
if(null != child[i].className && child[i].className.indexOf("Day") >= 0){


var maxDay = $scope.getDaysInMonthFunction(now.getFullYear(), now.getMonth());

if(child[i].className.indexOf("top") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getDay() - 1) < 1) ? maxDay : (now.getDay() - 1)));
}
if(child[i].className.indexOf("middle") >= 0){

child[i].innerHTML = $scope.addZero2Str(now.getDay());
}
if(child[i].className.indexOf("bottom") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getDay() + 1) > maxDay) ? 1 : (now.getDay() + 1)));
}
}
if(null != child[i].className && child[i].className.indexOf("Hour") >= 0){

if(child[i].className.indexOf("top") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getHours() - 1) < 0) ? 23 : (now.getHours() - 1)));
}
if(child[i].className.indexOf("middle") >= 0){

child[i].innerHTML = $scope.addZero2Str(now.getHours());
}
if(child[i].className.indexOf("bottom") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getHours() + 1) > 23) ? 0 : (now.getHours() + 1)));
}
}
if(null != child[i].className && child[i].className.indexOf("Minite") >= 0){

if(child[i].className.indexOf("top") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getMinutes() - 1) < 0) ? 59 : (now.getMinutes() - 1)));
}
if(child[i].className.indexOf("middle") >= 0){

child[i].innerHTML = $scope.addZero2Str(now.getMinutes());
}
if(child[i].className.indexOf("bottom") >= 0){

child[i].innerHTML = $scope.addZero2Str((((now.getMinutes() + 1) > 59) ? 0 : (now.getMinutes() + 1)));
}
}
}
};

//设置时间.
$scope.setDateControl = function($element){
var element = document.getElementsByClassName("dateControl")[0];
$scope.load();

document.getElementsByClassName("dateMask")[0].style.display = "block";
document.getElementsByClassName("dateMask")[0].style.width = document.documentElement.clientWidth + "px";
document.getElementsByClassName("dateMask")[0].style.height = document.documentElement.clientHeight + "px";

element.style.display = "block";
element.style.width = "100%";
element.style.top = (document.documentElement.clientHeight - 245) + "px";

$scope.selectElement = $element;
};

//确认设置
$scope.dateConfirm = function($element){

var element = document.getElementsByClassName("dateControl")[0];
var child = element.getElementsByTagName("li");

var year = null;
var month = null;
var day = null;
var hour = null;
var minute = null;

for(i in child){

if(null != child[i].className && child[i].className.indexOf("middle") >= 0){

if(child[i].className.indexOf("Year") >= 0){
year = child[i].innerHTML;
}
if(child[i].className.indexOf("Month") >= 0){
month = child[i].innerHTML;
}
if(child[i].className.indexOf("Day") >= 0){
day = child[i].innerHTML;
}
if(child[i].className.indexOf("Hour") >= 0){
hour = child[i].innerHTML;
}
if(child[i].className.indexOf("Minute") >= 0){
minute = child[i].innerHTML;
}
}
}
var inputDate = ""+year+"-"+month+"-"+day+" "+hour+":"+minute+":00";

$scope.selectElement.target.value = inputDate;

document.getElementsByClassName("dateMask")[0].style.display = "none";
document.getElementsByClassName("dateMask")[0].style.width = "0px";
document.getElementsByClassName("dateMask")[0].style.height = "0px";

var element = document.getElementsByClassName("dateControl")[0];
element.style.display = "none";
};
//取消输入
$scope.dateCancel = function($element){

document.getElementsByClassName("dateMask")[0].style.display = "none";
document.getElementsByClassName("dateMask")[0].style.width = "0px";
document.getElementsByClassName("dateMask")[0].style.height = "0px";

var element = document.getElementsByClassName("dateControl")[0];
element.style.display = "none";
};
//给月、日、时、分前面补0.
$scope.addZero2Str = function(str){

if(str.toString().length == 1){
str = '0' + str;
}
return str;
};

$scope.getDaysInMonthFunction = function(year,month){

//month = parseInt(month,10); //parseInt(number,type)这个函数后面如果不跟第2个参数来表示进制的话，默认是10进制。
var temp = new Date(year,month,0);
return temp.getDate();
};

//伸缩事件
$scope.upDownClick = function($element){

var htmlElement = $element.target;
var changeDiv = null;
if(htmlElement.nodeName.indexOf("LI") >= 0){

changeDiv = htmlElement.parentNode.parentNode;
}else if(htmlElement.nodeName.indexOf("DIV") >= 0){

changeDiv = htmlElement.parentNode;
}
var upClickElement = changeDiv.getElementsByClassName("upClick")[0];
var downClickElement = changeDiv.getElementsByClassName("downClick")[0];

if(upClickElement.style.display == "none"){


changeDiv.getElementsByTagName("textarea")[0].style.display = "block";
upClickElement.style.display = "inline-block";
downClickElement.style.display = "none";

}else{

changeDiv.getElementsByTagName("textarea")[0].style.display = "none";
upClickElement.style.display = "none";
downClickElement.style.display = "inline-block";
}
};


$scope.swipeUpFunction = function($element){

var changeElement = null;//时间选择控件内部变化的div
var htmlElement = $element.target;
if(htmlElement.nodeName == 'LI' || htmlElement.nodeName == 'HR'){
changeElement = htmlElement.parentNode;
}else if(htmlElement.nodeName == 'DIV'){
changeElement = htmlElement;
}

var datePickElement = changeElement.parentNode;

var liArray = changeElement.children;
//只修改事件触发的修改
for(i in liArray){
if(liArray[i].nodeName == 'LI'){

str = liArray[i].innerHTML;
//如果修改的是年，需要检查日是否需要变化.
if(liArray[i].className.indexOf('middleYear') >= 0){

var year = (parseInt(str) + 1) > 9999 ? 1000: (parseInt(str) + 1);
var middleMonthElement = datePickElement.getElementsByClassName("middleMonth")[0];
var month = middleMonthElement.innerHTML;
var middleDayElement = datePickElement.getElementsByClassName("middleDay")[0];
var day = middleDayElement.innerHTML;
var maxDay = $scope.getDaysInMonthFunction(parseInt(year), parseInt(month));
if(day > maxDay){

day = maxDay;
middleDayElement.innerHTML = $scope.addZero2Str(day);

var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
topDayElement.innerHTML = $scope.addZero2Str(parseInt(day) - 1);

var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
bottomDayElement.innerHTML = $scope.addZero2Str(1);
}

var topYearElement = datePickElement.getElementsByClassName("topYear")[0];
topYearElement.innerHTML = (parseInt(year) - 1) < 1000 ? 9999 : (parseInt(year) - 1);

liArray[i].innerHTML = year;

var bottomYearElement = datePickElement.getElementsByClassName("bottomYear")[0];
bottomYearElement.innerHTML = (parseInt(year) + 1) > 9999 ? 1000 : (parseInt(year) + 1);
}
//如果修改的是月，需要先检查年是否有变化，然后判断日是否有变化.
if(liArray[i].className.indexOf('middleMonth') >= 0){

var month = parseInt(str) + 1;
var middleYearElement = datePickElement.getElementsByClassName("middleYear")[0];
var year = middleYearElement.innerHTML;
var middleDayElement = datePickElement.getElementsByClassName("middleDay")[0];
var day = middleDayElement.innerHTML;
//月份>12,年加1.
if(month > 12){

month = 1;

year = (parseInt(year) + 1) > 9999 ? 1000: (parseInt(year) + 1);
middleYearElement.innerHTML = $scope.addZero2Str(year);

var topYearElement = datePickElement.getElementsByClassName("topYear")[0];
topYearElement.innerHTML = $scope.addZero2Str((parseInt(year) - 1) < 1000 ? 9999 : (parseInt(year) - 1));

var bottomYearElement = datePickElement.getElementsByClassName("bottomYear")[0];
bottomYearElement.innerHTML = $scope.addZero2Str((parseInt(year) + 1) > 9999 ? 1000 : (parseInt(year) + 1));
}

var topMonthElement = datePickElement.getElementsByClassName("topMonth")[0];
topMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) - 1) < 1 ? 12 : (parseInt(month) - 1));

liArray[i].innerHTML = $scope.addZero2Str(month);

var bottomMonthElement = datePickElement.getElementsByClassName("bottomMonth")[0];
bottomMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) + 1) > 12 ? 1 : (parseInt(month) + 1));

var maxDay = $scope.getDaysInMonthFunction(parseInt(year), parseInt(month));

if(day > maxDay){

day = maxDay;
middleDayElement.innerHTML = $scope.addZero2Str(day);
var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
topDayElement.innerHTML = $scope.addZero2Str((parseInt(day) - 1));
bottomDayElement.innerHTML = $scope.addZero2Str(1);
}
}
//如果修改的是日，需要先检查月是否有变化，然后检查年是否有变化.
if(liArray[i].className.indexOf('middleDay') >= 0){

var middleYearElement = datePickElement.getElementsByClassName("middleYear")[0];
var year = middleYearElement.innerHTML;
var middleMonthElement = datePickElement.getElementsByClassName("middleMonth")[0];
var month = middleMonthElement.innerHTML;
var day = parseInt(str) + 1;
var maxDay = $scope.getDaysInMonthFunction(parseInt(year), parseInt(month));
//日有变化
if(day > maxDay){

month = parseInt(month) + 1;
day = 1;

if(month > 12){
//年+1
month = 1;
year = (parseInt(year) + 1) > 9999 ? 1000: (parseInt(year) + 1);
middleYearElement.innerHTML = year;

var topYearElement = datePickElement.getElementsByClassName("topYear")[0];
topYearElement.innerHTML = (parseInt(year) - 1) < 1000 ? 9999 : (parseInt(year) - 1);

var bottomYearElement = datePickElement.getElementsByClassName("bottomYear")[0];
bottomYearElement.innerHTML = (parseInt(year) + 1) > 9999 ? 1000 : (parseInt(year) + 1);

}
middleMonthElement.innerHTML = $scope.addZero2Str(month);

var topMonthElement = datePickElement.getElementsByClassName("topMonth")[0];
topMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) - 1) < 1 ? 12 : (parseInt(month) - 1));

var bottomMonthElement = datePickElement.getElementsByClassName("bottomMonth")[0];
bottomMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) + 1) > 12 ? 1 : (parseInt(month) + 1));


var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
topDayElement.innerHTML = $scope.addZero2Str($scope.getDaysInMonthFunction(parseInt(year), parseInt(month)));

liArray[i].innerHTML = $scope.addZero2Str(day);

var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
bottomDayElement.innerHTML = $scope.addZero2Str(day + 1);
}
else {

var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
topDayElement.innerHTML = $scope.addZero2Str(day - 1);

liArray[i].innerHTML = $scope.addZero2Str(day);

var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
bottomDayElement.innerHTML = $scope.addZero2Str((day == maxDay) ? 1 : (day + 1));
}
}

if(liArray[i].className.indexOf('Hour') >= 0){

var hour = parseInt(str) + 1;
if(hour > 23){
hour = 0;
}

liArray[i].innerHTML = $scope.addZero2Str(hour);
}

if(liArray[i].className.indexOf('middleMinute') >= 0){

var minute = parseInt(str) + 1;
//分>59,小时+1
if(minute > 59){

var topHourElement = datePickElement.getElementsByClassName("topHour")[0];
var topHour = topHourElement.innerHTML;
topHourElement.innerHTML = $scope.addZero2Str(parseInt(topHour) + 1 > 23 ? 0 : parseInt(topHour) + 1);

var middleHourElement = datePickElement.getElementsByClassName("middleHour")[0];
var middleHour = middleHourElement.innerHTML;
middleHourElement.innerHTML = $scope.addZero2Str(parseInt(middleHour) + 1 > 23 ? 0 : parseInt(middleHour) + 1);

var bottomHourElement = datePickElement.getElementsByClassName("bottomHour")[0];
var bottomHour = bottomHourElement.innerHTML;
bottomHourElement.innerHTML = $scope.addZero2Str(parseInt(bottomHour) + 1 > 23 ? 0 : parseInt(bottomHour) + 1);
}

var topMinuteElement = datePickElement.getElementsByClassName("topMinute")[0];
var topMinute = topMinuteElement.innerHTML;
topMinuteElement.innerHTML = $scope.addZero2Str(parseInt(topMinute) + 1 > 59 ? 0 : parseInt(topMinute) + 1);

var middleMinuteElement = datePickElement.getElementsByClassName("middleMinute")[0];
var middleMinute = middleMinuteElement.innerHTML;
middleMinuteElement.innerHTML = $scope.addZero2Str(parseInt(middleMinute) + 1 > 59 ? 0 : parseInt(middleMinute) + 1);

var bottomMinuteElement = datePickElement.getElementsByClassName("bottomMinute")[0];
var bottomMinute = bottomMinuteElement.innerHTML;
bottomMinuteElement.innerHTML = $scope.addZero2Str(parseInt(bottomMinute) + 1 > 59 ? 0 : parseInt(bottomMinute) + 1);
}
}
}

};
$scope.swipeDownFunction = function($element){

var changeElement = null;//时间选择控件内部变化的div
var htmlElement = $element.target;
if(htmlElement.nodeName == 'LI' || htmlElement.nodeName == 'HR'){
changeElement = htmlElement.parentNode;
}else if(htmlElement.nodeName == 'DIV'){
changeElement = htmlElement;
}

var datePickElement = changeElement.parentNode;

var liArray = changeElement.children;
//只修改事件触发的修改
for(i in liArray){
if(liArray[i].nodeName == 'LI'){

str = liArray[i].innerHTML;
//如果修改的是年，需要检查日是否需要变化.
if(liArray[i].className.indexOf('middleYear') >= 0){

var year = (parseInt(str) - 1) < 1000 ? 9999: (parseInt(str) - 1);
var middleMonthElement = datePickElement.getElementsByClassName("middleMonth")[0];
var month = middleMonthElement.innerHTML;
var middleDayElement = datePickElement.getElementsByClassName("middleDay")[0];
var day = middleDayElement.innerHTML;
var maxDay = $scope.getDaysInMonthFunction(parseInt(year), parseInt(month));
if(day > maxDay){

day = maxDay;
middleDayElement.innerHTML = $scope.addZero2Str(day);

var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
topDayElement.innerHTML =$scope.addZero2Str( parseInt(day) - 1);

var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
bottomDayElement.innerHTML = $scope.addZero2Str(1);
}

var topYearElement = datePickElement.getElementsByClassName("topYear")[0];
topYearElement.innerHTML = (parseInt(year) - 1) < 1000 ? 9999 : (parseInt(year) - 1);

liArray[i].innerHTML = year;

var bottomYearElement = datePickElement.getElementsByClassName("bottomYear")[0];
bottomYearElement.innerHTML = (parseInt(year) + 1) > 9999 ? 1000 : (parseInt(year) + 1);
}
//如果修改的是月，需要先检查年是否有变化，然后判断日是否有变化.
if(liArray[i].className.indexOf('middleMonth') >= 0){

var month = parseInt(str) - 1;
var middleYearElement = datePickElement.getElementsByClassName("middleYear")[0];
var year = middleYearElement.innerHTML;
var middleDayElement = datePickElement.getElementsByClassName("middleDay")[0];
var day = middleDayElement.innerHTML;
if(month < 1){

month = 12;

year = (parseInt(year) - 1) < 1000 ? 9999: (parseInt(year) - 1);
middleYearElement.innerHTML = year;

var topYearElement = datePickElement.getElementsByClassName("topYear")[0];
topYearElement.innerHTML = (parseInt(year) - 1) < 1000 ? 9999 : (parseInt(year) - 1);

var bottomYearElement = datePickElement.getElementsByClassName("bottomYear")[0];
bottomYearElement.innerHTML = (parseInt(year) + 1) > 9999 ? 1000 : (parseInt(year) + 1);
}

var topMonthElement = datePickElement.getElementsByClassName("topMonth")[0];
topMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) - 1) < 1 ? 12 : (parseInt(month) - 1));

liArray[i].innerHTML = $scope.addZero2Str(month);

var bottomMonthElement = datePickElement.getElementsByClassName("bottomMonth")[0];
bottomMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) + 1) > 12 ? 1 : (parseInt(month) + 1));

var maxDay = $scope.getDaysInMonthFunction(parseInt(year), parseInt(month));

if(day > maxDay){

day = maxDay;
middleDayElement.innerHTML = $scope.addZero2Str(day);
var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
topDayElement.innerHTML = $scope.addZero2Str((parseInt(day) - 1));
bottomDayElement.innerHTML = $scope.addZero2Str(1);
}
}
//如果修改的是日，需要先检查月是否有变化，然后检查年是否有变化.
if(liArray[i].className.indexOf('middleDay') >= 0){

var middleYearElement = datePickElement.getElementsByClassName("middleYear")[0];
var year = middleYearElement.innerHTML;
var middleMonthElement = datePickElement.getElementsByClassName("middleMonth")[0];
var month = middleMonthElement.innerHTML;
var day = parseInt(str) - 1;

//日有变化
if(day < 1){

month = parseInt(month) - 1;

if(month < 1){
//年-1
month = 12;
year = (parseInt(year) - 1) < 1000 ? 9999: (parseInt(year) - 1);
middleYearElement.innerHTML = year;

var topYearElement = datePickElement.getElementsByClassName("topYear")[0];
topYearElement.innerHTML = (parseInt(year) - 1) < 1000 ? 9999 : (parseInt(year) - 1);

var bottomYearElement = datePickElement.getElementsByClassName("bottomYear")[0];
bottomYearElement.innerHTML = (parseInt(year) + 1) > 9999 ? 1000 : (parseInt(year) + 1);

}

middleMonthElement.innerHTML = $scope.addZero2Str(month);

var topMonthElement = datePickElement.getElementsByClassName("topMonth")[0];
topMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) - 1) < 1 ? 12 : (parseInt(month) - 1));

var bottomMonthElement = datePickElement.getElementsByClassName("bottomMonth")[0];
bottomMonthElement.innerHTML = $scope.addZero2Str((parseInt(month) + 1) > 12 ? 1 : (parseInt(month) + 1));


var maxDay = $scope.getDaysInMonthFunction(parseInt(year), parseInt(month));
day = maxDay;

var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
topDayElement.innerHTML = $scope.addZero2Str(day - 1);

liArray[i].innerHTML = $scope.addZero2Str(day);

var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
bottomDayElement.innerHTML = $scope.addZero2Str(1);
}
else {

var topDayElement = datePickElement.getElementsByClassName("topDay")[0];
topDayElement.innerHTML = $scope.addZero2Str(day - 1);

liArray[i].innerHTML = $scope.addZero2Str(day);

var bottomDayElement = datePickElement.getElementsByClassName("bottomDay")[0];
bottomDayElement.innerHTML = $scope.addZero2Str(day + 1);
}
}

if(liArray[i].className.indexOf('Hour') >= 0){

var hour = parseInt(str) - 1;
if(hour < 0){
hour = 23;
}

liArray[i].innerHTML = $scope.addZero2Str(hour);
}

if(liArray[i].className.indexOf('middleMinute') >= 0){

var minute = parseInt(str) - 1;
//分>59,小时+1
if(minute < 0){

var topHourElement = datePickElement.getElementsByClassName("topHour")[0];
var topHour = topHourElement.innerHTML;
topHourElement.innerHTML = $scope.addZero2Str(parseInt(topHour) - 1 < 0 ? 23 : parseInt(topHour) - 1);

var middleHourElement = datePickElement.getElementsByClassName("middleHour")[0];
var middleHour = middleHourElement.innerHTML;
middleHourElement.innerHTML = $scope.addZero2Str(parseInt(middleHour) - 1 < 0 ? 23 : parseInt(middleHour) - 1);

var bottomHourElement = datePickElement.getElementsByClassName("bottomHour")[0];
var bottomHour = bottomHourElement.innerHTML;
bottomHourElement.innerHTML = $scope.addZero2Str(parseInt(bottomHour) - 1 > 0 ? 23 : parseInt(bottomHour) - 1);
}

var topMinuteElement = datePickElement.getElementsByClassName("topMinute")[0];
var topMinute = topMinuteElement.innerHTML;
topMinuteElement.innerHTML = $scope.addZero2Str(parseInt(topMinute) - 1 < 0 ? 59 : parseInt(topMinute) - 1);

var middleMinuteElement = datePickElement.getElementsByClassName("middleMinute")[0];
var middleMinute = middleMinuteElement.innerHTML;
middleMinuteElement.innerHTML = $scope.addZero2Str(parseInt(middleMinute) - 1 < 0 ? 59 : parseInt(middleMinute) - 1);

var bottomMinuteElement = datePickElement.getElementsByClassName("bottomMinute")[0];
var bottomMinute = bottomMinuteElement.innerHTML;
bottomMinuteElement.innerHTML = $scope.addZero2Str(parseInt(bottomMinute) - 1 < 0 ? 59 : parseInt(bottomMinute) - 1);
}
}
}
};

$scope.selectElement = null;

$scope.docs = [{
id: 0,
docName: 'abcaaaaaaaaaaaaaaaaaaaaaa.txt',
docSize: '256k',
createDate:'2015/06/30',
image: 'img/adam.jpg'
}, {
id: 1,
docName: 'abccc.txt',
docSize: '256k',
createDate:'2015/06/30',
image: 'img/adam.jpg'
}];
});