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)" onfocus="this.blur();"/>
<hr size="1">
结束时间 : <input type="text" placeholder="点击选择时间" style="display: inline-block;margin-left: 15px" size="22"
ng-click="setDateControl($event)" onfocus="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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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;">&nbsp;</li>
    <li align="center" style="list-style-type:none;">&nbsp;</li>
    <li align="center" style="list-style-type:none;">&nbsp;</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;">&nbsp;</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;">&nbsp;</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 >-&nbsp;</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 >-&nbsp;</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>:&nbsp;&nbsp;</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'
  }];
});