js实现功能时间控件

最新推荐文章于 2024-02-12 15:38:41 发布
最新推荐文章于 2024-02-12 15:38:41 发布
阅读量143 收藏
点赞数
分类专栏： web前台页面 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/life___seven/article/details/84769135
版权
<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'
}];
});
「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js移动端日期时间选择控件
12-28
在JavaScript（特别是原生JS）中，我们可以创建自定义的日期时间选择器，或者利用现有的开源库来实现这一功能。 在JavaScript中，`Date` 对象是处理日期和时间的基础。通过实例化 `Date` 对象，我们可以获取当前...
js时间控件
01-08
本篇文章将深入探讨JavaScript时间控件的实现原理、常见功能以及如何使用这些控件。 一、JavaScript时间控件的实现原理 JavaScript时间控件的基本原理是利用DOM操作和事件监听来创建一个交互式的日期选择界面。当...
android 日期时间选择器_Vue独立组件——11个最佳Vue.js日期选择器组件
weixin_39843151的博客
11-25 482
介绍本文主要介绍几个Vue的时间日期选择器组件，目的在于让开发者们多一些选择，不管是从功能还是从样式，都可以选择一个适合的组件，这些组件没有绝对的好与不好，就看个人如何选择了，以下分别介绍十一个日期选择器，包含移动端和PC端，且全部开源：1. vue-DateTime2. vue-hotel-datepicker3. vue-datetime-picker4. VueCtkDateTimePick...
分享89个时间日期JS特效，总有一款适合您
最新发布
zdh13370188237的博客
02-12 871
分享89个时间日期JS特效，总有一款适合您
js实现日期控件
热门推荐
玉案轩窗的博客
10-15 1万+
前言最近花了点时间写了个日期控件，首先说说写日期控件的初衷，有两点： 第一点是没有写过对于日期的生成不甚了解 工作中使用框架的日期控件，但是想要自己实现下该日期控件主要是学习使用，功能不多，支持输出天以及日期范围的选择。 实现思路日期控件实现了单日期以及日期范围的功能，单日期实现效果如下图： 日期范围实现效果图如下： 下面主要说说主要的实现思路，首先说说面板日期的生成，日期面板如下图： 日期面
分享88个时间日期JS特效，总有一款适合您
zdh13370188237的博客
02-12 998
酒店住房日期选择插件jQuery Date Range Picker。知识付费甚欢喜，为咱码农谋福利。自适应倒计时插件jquery.lwtCountdown.js。兼容IE6的时间范围选择插件dateRange.js。基于jQuery的时间处理插件timeago.js。时间轴插件jquery.eventFlow.js。时间插件jquery-timepicker.js。日期时间插件jQuery Timepicker。双日历选择插件double-date.js。日期日历插件ion.calendar.js。
vue+elementui实现日期时间控件分钟固定步长（完整案例及效果图）.zip
02-15
在本文中，我们将深入探讨如何使用Vue.js框架与Element UI库来实现一个具有自定义分钟固定步长的日期时间选择器。Vue.js是一款轻量级的前端JavaScript框架，以其灵活性和可扩展性受到广大开发者的青睐。而Element UI...
js实现txt控件实现时间控件
03-10
然后，用JavaScript实现日历功能。这通常涉及到处理`click`事件，当用户点击“选择时间”按钮时，弹出日历视图。我们可以创建一个函数来生成日历HTML，并将其插入到页面的某个位置，如一个模态窗口或覆盖层。同时，...
只选择小时、分的时间JS时间控件
03-29
jquery-timepicker.js里面可设置时分的间隔及时间范围 可直接使用 也可根据自己的需求再修改样式及JS
js 时分秒控件 时间控件
06-24
HH:MM:SS格式的js控件。 可用键盘上下左右操作。 按住向上或向下按钮不放时间递增递减。 屏蔽键盘除外数字和删除键keycode。
JS 日期控件
04-12
轻量级 简单的 日期插件 轻量级 简单的 日期插件 轻量级 简单的 日期插件
日期 时间js控件
01-21
代码如下:[removed] /**//** *本日历选择控件由tiannet根据前人经验完善而得。大部分代码来自meizz的日历控件。 *tiannet添加了时间选择功能、select,object标签隐藏功能，还有其它小功能。 *使用方法： * (1)只选择日期 <input type=”text” name=”date” readOnly onClick=”setDay(this);”> * (2)选择日期和小时 <input type=”text” name=”dateh” readOnly onClick=”setDayH(this);”>
Js时间插件
11-12
特别好用的时间插件, 使用方便, 引用简单, 适合新手, 使用原生js编写.
js的时间控件
09-17
jquery.date.js 里面调整了可以选择过去的时间的error..CSDN无法免费，只能1积分分享了。顺便看有人下载不。
纯js实现日历控件
weixin_39877284的博客
08-13 3213
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;日历&lt;/title&gt; &lt;script type="text/javascript"&gt;
JS - 实现时间选择器
技术共享，共同进步！
12-24 6344
JS实现时间选择器
MyWdatePicker97的使用，页面中添加时间控件
SuperMan程序人生（关注微信公众号）
05-03 2765
场景：最近在做一个日期年份的限制，比如文本框输入2018年，弹出的my97控件限制在2018年，想到用最大值最小值限制，这里参照的是my97说明文档，把该问题记录下来以便于以后参考。 首先js： function minValue(){ var year=$("#year").val(); return year+'-01-01';//打得到该年的最小一天，当然是1月1日 } ...
js视频时间条控件
05-27
您可以使用HTML5的`<video>`标签结合JavaScript来实现视频时间条控件。以下是一个基本的例子： HTML代码： ```html Your browser does not support the video tag. <div id="progress"></div> ``` CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值