angular实现时间控件

时间控件：包括年，月，日，时，分，星期等；
样式有点丑，借鉴的自己调试下样式吧~
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src='http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js'></script>
<script src="angular-touch.js" type="text/javascript"></script>
<title>angularjs 时间控件</title>
<style type='text/css'>
*{margin:0;padding:0;font-family: 'Microsoft Yahei'!important;font-size:16px;}
.hidden{display:none !important;}
.active{display:block !important;}
.timeInput{display:block;margin:10px;}
.timeDiv{border:1px solid #eeeeee;margin:0px auto;height:auto;width:100%;position:fixed;overflow:hidden;box-sizing:border-box;bottom:0;}
.timeTitle{width:100%;height:auto;position:relative;overflow:hidden;background-color:#eeeeee;}
.timeTitle input{display:block;appearance:none;-moz-appearance:none;-webkit-appearance:none;float:right;padding:4px 14px;color:red;background-color:transparent;border:none;}
.timeBody{border-top:1px solid #eeeeee;height:110px;width:100%;position:relative;overflow:hidden;box-sizing:border-box;}
.timeBody ul{width:20%;height:auto;float:left;}
.timeBody ul li{display:block;width:100%;height:22px;text-align:center;line-height:22px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.activeBlock{width:100%;height:24px;position:absolute;top:50%;margin-top:-12px;border-top:1px solid red;border-bottom:1px solid red;box-sizing: border-box;z-index:-1;}
.activeBlock ul{display:block;width:80%;height:100%;margin-left:10%;position:relative;overflow:hidden;}
.activeBlock ul li{display:block;width:25%;height:100%;float:left;text-align:center;}
</style>
</head>
<body ng-app="timeDemo" ng-controller="timeController">

<rn-time></rn-time>
<script type="text/ng-template" id="time.html">
<div>
<input class="timeInput" value="{{''|timeFilter:timeData[0]:timeData[1]:timeData[2]:timeData[3]:timeData[4]}}" readonly ng-click="inputClick()">
<div class="timeDiv" ng-show="isShow">
<div class="timeTitle">
<input type="button" value="完成" ng-click="OKClick()">
</div>
<div class="timeBody">
<ul ng-touchmove="touchFunction($event,0)" ng-touchstart="touchFunction($event,0)" ng-touchend="touchFunction($event,0)">
<li ng-repeat="aYear in timeArrayData[0]" ng-style="{height:iHeight+'px'}">{{aYear|numFilter:4}}</li>
</ul>
<ul ng-touchmove="touchFunction($event,1)" ng-touchstart="touchFunction($event,1)" ng-touchend="touchFunction($event,1)">
<li ng-repeat="aMouth in timeArrayData[1]" ng-style="{height:iHeight+'px'}">{{aMouth|numFilter:2}}</li>
</ul>
<ul ng-touchmove="touchFunction($event,2)" ng-touchstart="touchFunction($event,2)" ng-touchend="touchFunction($event,2)">
<li ng-repeat="aDay in timeArrayData[2]" ng-style="{height:iHeight+'px'}">{{aDay|numFilter:2}}({{getWeekDay(aDay)}})</li>
</ul>
<ul ng-touchmove="touchFunction($event,3)" ng-touchstart="touchFunction($event,3)" ng-touchend="touchFunction($event,3)">
<li ng-repeat="aHour in timeArrayData[3]" ng-style="{height:iHeight+'px'}">{{aHour|numFilter:2}}</li>
</ul>
<ul ng-touchmove="touchFunction($event,4)" ng-touchstart="touchFunction($event,4)" ng-touchend="touchFunction($event,4)">
<li ng-repeat="aMinute in timeArrayData[4]" ng-style="{height:iHeight+'px'}">{{aMinute|numFilter:2}}</li>
</ul>
<div class="activeBlock" ng-style="{height:iHeight+2+'px'}">
<ul>
<li>年</li>
<li>月</li>
<li></li>
<li>:</li>
</ul>
</div>
</div>
</div>
</div>
</script>
</body>
<script>
angular.module("timeDemo",["ngTouch"])
.controller("timeController",["$scope","$interval",function($scope){
var date=new Date();
$scope.timeData=[
date.getFullYear(),//年
date.getMonth(),//月
date.getDate(),//日
date.getHours(),//小时
date.getMinutes()//分钟
];
}])
.filter("timeFilter",function(){
return function(input,y,m,d,h,min){
return fix(y,4)+'-'+fix(m,2)+'-'+fix(d,2)+' '+fix(h,2)+':'+fix(min,2);
}
})
.filter("numFilter",function(){
return function(input,num){
return fix(input,num)
}
})
.directive('rnTime', function () {
return {
restrict: 'AE',
scope: {},//全新的隔离作用域
replace:true,
templateUrl: "time.html",
link: function (scope, iElement, iAttrs) {//DOM操作
// 事件控件显示/隐藏
scope.isShow=false;
// 点击input,显示时间控件
scope.inputClick=function(){
scope.isShow=true;
}
// 点击完成，隐藏时间控件
scope.OKClick=function(){
scope.isShow=false;
}

// 每列显示的数目，要求为奇数
scope.showNum=5;

// 初始化时间
var date=new Date();
scope.timeData=[
date.getFullYear(),//年
date.getMonth()+1,//月
date.getDate(),//日
date.getHours(),//小时
date.getMinutes(),//分钟
updateDay(date.getFullYear(),date.getMonth()+1)
];
// 初始化时间数组
scope.timeArrayData=new Array(5);
scope.timeArrayData[0]=arrayCreate(scope.timeData[0]-10,scope.timeData[0]+10);//前后各十年
scope.timeArrayData[1]=arrayCreate(1,12);//月
scope.timeArrayData[2]=arrayCreate(1,dayOfMouth(scope.timeData[0],scope.timeData[1]));//日
scope.timeArrayData[3]=arrayCreate(0,23);//时
scope.timeArrayData[4]=arrayCreate(0,59);//分

//获取行高
scope.iHeight=22;
// 初始化位置
var ulList=iElement.find("ul");
for(var i=0;i<(ulList.length-1);i++){
var ele=ulList[i];
var nowValue=scope.timeData[i];
var arr=scope.timeArrayData[i]
ele.style.marginTop = (((scope.showNum-1)/2-(nowValue-arr[0])) * scope.iHeight) + "px";
}

// 根据“日”获取周几
var weekDay=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
scope.getWeekDay=function(d){
return weekDay[(scope.timeData[5]+d-1)%7];

}

// 用户滑动事件
scope.touchFunction = function (event,index) {
var ulElement=iElement.find("ul")[index];//操作对象
switch (event.type) {
case "touchstart":
scope.Y=event.touches[0].clientY;//起点纵坐标
scope.touchMoveY=event.touches[0].clientY;;//终点纵坐标初始化
ulElement.style.transition="inherit";
var position=scope.timeData[index]-scope.timeArrayData[index][0];//第n-1行
ulElement.style.marginTop=(((scope.showNum-1)/2-position) * scope.iHeight) + "px";
scope.marginTop=parseInt(ulElement.style.marginTop.replace("px", "") || 0);
break;
case "touchmove":
if (event.touches.length > 0) {
var moveY = 0;
scope.touchMoveY = event.touches[0].clientY;
if (scope.touchMoveY > scope.Y) {//down
moveY = scope.touchMoveY-scope.Y;
moveY = scope.marginTop + moveY;
scope.trun = "down";
}
else {//up
moveY=scope.Y - scope.touchMoveY;
moveY=scope.marginTop-moveY;
moveY=(-moveY>=scope.timeArrayData[index].length*scope.iHeight)?-scope.timeArrayData[index].length*scope.iHeight+1:moveY;
scope.trun = "up";
}
ulElement.style.marginTop = moveY+'px';
}
break;
case "touchend":
ulElement.style.transition = "1s margin-top";
var movePosition=parseInt(Math.abs(scope.touchMoveY - scope.Y)/scope.iHeight);
var moveFloat=Math.abs(scope.touchMoveY - scope.Y)%scope.iHeight/scope.iHeight;
movePosition=moveFloat>(1/3)?movePosition+1:movePosition;

scope.timeData[index]=scope.trun=="up"?scope.timeData[index]+movePosition:scope.timeData[index]-movePosition;
if((scope.timeData[index]+movePosition)>scope.timeArrayData[index][(scope.timeArrayData[index]).length-1]){
scope.timeData[index]=scope.timeArrayData[index][(scope.timeArrayData[index]).length-1];
}else if((scope.timeData[index]-movePosition)<scope.timeArrayData[index][0]){
scope.timeData[index]=scope.timeArrayData[index][0]
}

var position=scope.timeData[index]-scope.timeArrayData[index][0];
ulElement.style.marginTop = (((scope.showNum-1)/2-position) * scope.iHeight) + "px";

// 如果年月改变，更新当月的天数和第一天是周几
if(index==0||index==1){
scope.timeArrayData[2]=arrayCreate(1,dayOfMouth(scope.timeData[0],scope.timeData[1]));//日
var isInclude=false;
for(j in scope.timeArrayData[2]){
if(scope.timeData[2]==scope.timeArrayData[2][j]){
isInclude=true;
break;
}
}
if(!isInclude){
scope.timeData[2]=scope.timeArrayData[2][(scope.timeArrayData[2]).length-1];
iElement.find("ul")[2].style.marginTop = (((scope.showNum-1)/2-(scope.timeArrayData[2]).length+1) * scope.iHeight) + "px";
}
//
scope.timeData[5]=updateDay(scope.timeData[0],scope.timeData[1]);
}
break;
}
}
}
};
});

// 公用方法
// 格式化数字 显示为几位的整数
function fix(num,length){
return (''+num).length<length?((new Array(length+1)).join('0')+num).slice(-length):''+num;
}
// 创建数组（起始数字，结束数字）
function arrayCreate(start,end){
if(end<start){
var arr=[];
}
else{
var len=end-start+1;
var arr=new Array(len);
for(var i=0;i<len;i++){arr[i]=start+i;}
}
return arr;
}
//每月总天数计算
function dayOfMouth(year,mouth){
var days_in_months = new Array(31,28,31,30,31,30,31,31,30,31,30,31);//定义月份的数组，函数运行可以直接返回一个数值.
// 二月
if (2 == mouth){
return ((0 == year % 4) && (0 != (year % 100))) ||(0 == year % 400) ? 29 : 28;
}
else{
return days_in_months[mouth-1];
}
}
// 根据年月计算第一天是周几
function updateDay(y,m){
return new Date(y,m-1,1).getDay();
}
</script>
</html>
原创文章，作者：余倩倩，如若转载，请注明出处：https://www.pmtemple.com/flyingfish/214/
angular实现时间控件

相关推荐

发表回复
