Tạo bài viết
Đăng ký
04/10/2018, 20:15

Tạo ứng dụng Date Picker với Angular JS

Tiếp tục mang đến cho các bạn thêm một ứng dụng web nho nhỏ được làm từ Angular.js, với những chia sẻ trong bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc tìm hiểu cũng như sử dụng tốt angular.js cho những ứng dụng web của mình sau này. Xem Demo | Download HTML Đầu tiên, ...

Tiếp tục mang đến cho các bạn thêm một ứng dụng web nho nhỏ được làm từ Angular.js, với những chia sẻ trong bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc tìm hiểu cũng như sử dụng tốt angular.js cho những ứng dụng web của mình sau này.

tao-ung-dung-date-picker-voi-angular-js

Xem Demo | Download

HTML

Đầu tiên, khai báo tên app trong thẻ html.

<html ng-app="myapp">

Rồi copy toàn bộ khugn chuẩn html cho ứng dụng date picker sau :

<body ng-controller="main" >
	<div id="icon_calendar">

		<div id="month_wrap">
			<img id="fleche_mois1" class="fleches_mois" src="http://img11.hostingpics.net/pics/163358chevrongauche.png" height="20" awidth="13" value="-1">
			<img id="fleche_mois2" class="fleches_mois" src="http://img11.hostingpics.net/pics/941588chevrondroite.png" height="20" awidth="13" value="1">
			<div id="month{{$index+1}}" class="mois" ng-repeat="m in mois">
				{{m.name}}
			</div>
		</div>

		<div id="days_wrap">
			<span id="day{{$index+1}}" class="days" ng-repeat="d in jours">{{d.day}}
			</span>
		</div>
  </div>
</body>

CSS

Chúng ta sẽ định dạng date picker với đoạn css sau :

html,body
{
	height: 100%;
	awidth: 100%;
	margin: 0;
	background-color: #2295EC;
	font-family: 'openlight',sans-serif;
}

@-webkit-keyframes bounce{
	0%{transform:scale(1);}
	50%{transform:scale(1.4);}
	100%{transform:scale(1);}
}

@-webkit-keyframes bounce2{
	0%{transform:scale(1);}
	50%{transform:scale(0.6);}
	100%{transform:scale(1);}
}

@keyframes bounce{
	0%{transform:scale(1);}
	50%{transform:scale(1.4);}
	100%{transform:scale(1);}
}

@keyframes bounce2{
	0%{transform:scale(1);}
	50%{transform:scale(0.6);}
	100%{transform:scale(1);}
}
#icon_calendar
{
	position: absolute;
	awidth: 80px;
	height: 80px;
	left: 50%;
	top: 50%;
	margin-left: -40px;
	margin-top: -40px;
	border-radius: 18px;
	background-color: rgb(240,240,240);
	box-shadow: 0px 0px 8px rgb(60,60,60);
	cursor: pointer;
	color: #F05252;
	overflow: hidden;
	transition:all 0.2s;
}

#icon_calendar:hover
{
	transform:scale(1.1);
}
#days_wrap
{
	position: absolute;
	awidth: 100%;
	text-align: center;
	top: 40px;
	height: 110px;
	color: #3C3C3C;
	font-size: 35px;
	z-index: 3;
	transition:all 0.2s;
}
.days
{
	position: relative;
	float: left;
	awidth: calc(100%/7);
	height: calc(100%/5);
	font-size: 12px;
	text-align: center;
	transition:all 0.2s;
	display: none;
	line-height: 22px;
	border-radius: 3px;
	cursor: pointer;
}
.fleches_mois
{
	position: absolute;
	cursor: pointer;
	top: 11px;
	z-index: 1;
	display: none;
	opacity: 1;
}
#fleche_mois1
{
	left: 5px;
}
#fleche_mois2
{
	right: 5px;
}

#month_wrap
{
	position: absolute;
	awidth: 100%;
	text-align: center;
	top: 00px;
	height: 40px;
	line-height: 40px;
	transition:all 0.1s;
	color: #F05252;
}

.mois
{
	position: absolute;
	margin-left: 230px;
	awidth: 80px;
	height: 100%;
	top: 0px;
	line-height: 40px;
	font-size: 14px;
	text-align: left;
	font-family: 'openbold',sans-serif;
	transition:all 0.2s;
	opacity: 0.15;
	display: none;
}

Angular.js

Đây chính là trái tim của bài viết, trước hết các bạn copy đường dẫn khai báo thư viện jQuery và Angular.js.

<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/angular.min.js"></script>

Và đây là toàn bộ đoạn script giúp các bạn tạo ứng dụng date picker.

var victorApp=angular.module('myapp',[])

victorApp.controller('main', ['$scope', function ($scope) {

	$("html").click(function(){
		if ($("#icon_calendar").awidth()!=80) {
			ok=0
			$("#icon_calendar").css({awidth:80,height:80,borderRadius:"18px",marginLeft:-40,marginTop:-40,animation:"bounce2 0.3s",cursor:"pointer",transform:"scale(1)"})
			$(".mois").css({display:"none",fontSize:14,awidth:80})
			$(".days").css({fontFamily:"'openlight',sans-serif",display:"none",backgroundColor:"transparent",color:"#3C3C3C"})
			$("#month_wrap").css({backgroundColor:"transparent",color:"#F05252"})
			$("#month"+mois_choisi).css({marginLeft:0,display:"block"})
			$("#day"+jour_choisi).css({position:"absolute",fontSize:30,awidth:"100%",display:"block"})
			$(".fleches_mois").hide()
			console.log("eee")
		};
	})

	$("body").on('click',"#icon_calendar",function(event){
		event.stopPropagation();
		if ($(this).awidth()==80) {
			ok=1
			$(this).css({awidth:160,height:150,borderRadius:"7px",marginLeft:-80,marginTop:-75,animation:"bounce 0.3s",cursor:"initial",transform:"scale(1)"})
			$(".mois").css({display:"block",fontSize:18,awidth:100})
			$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
			$("#month_wrap").css({backgroundColor:"#F05252",color:"rgb(240,240,240)"})
			$("#month"+mois_choisi).css("margin-left",30)
			$("#day"+ladate.getDate()).css({position:"relative",fontSize:12,awidth:"calc(100%/7)",backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
			$("#day"+jour_choisi).css({position:"relative",fontSize:12,awidth:"calc(100%/7)"})
			mois_retenu=mois_choisi
			console.log("lol")
			$(".fleches_mois").show()

		};

	})

	$("body").on("click",".days",function(event){
		event.stopPropagation();
		if ($("#icon_calendar").awidth()!=80) {
			ok=0
			$("#icon_calendar").css({awidth:80,height:80,borderRadius:"18px",marginLeft:-40,marginTop:-40,animation:"bounce2 0.3s",cursor:"pointer",transform:"scale(1)"})
			$(".mois").css({display:"none",fontSize:14,awidth:80})
			$(".days").css({fontFamily:"'openlight',sans-serif",display:"none",backgroundColor:"transparent",color:"#3C3C3C"})
			$("#month_wrap").css({backgroundColor:"transparent",color:"#F05252"})
			$("#month"+mois_choisi).css({marginLeft:0,display:"block"})
			jour_choisi=$(this).html()
			console.log($(this).html())
			$("body").trigger("mouseleave",".days")
			$("#day"+jour_choisi).css({position:"absolute",fontSize:30,awidth:"100%",display:"block"})
			$(".fleches_mois").hide()
		}
		else
		{
			ok=1
			$("#icon_calendar").css({awidth:160,height:150,borderRadius:"7px",marginLeft:-80,marginTop:-75,animation:"bounce 0.3s",cursor:"initial",transform:"scale(1)"})
			$(".mois").css({display:"block",fontSize:18,awidth:100})
			$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
			$("#month_wrap").css({backgroundColor:"#F05252",color:"rgb(240,240,240)"})
			$("#month"+mois_choisi).css("margin-left",30)
			$("#day"+ladate.getDate()).css({position:"relative",fontSize:12,awidth:"calc(100%/7)",backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
			$("#day"+jour_choisi).css({position:"relative",fontSize:12,awidth:"calc(100%/7)"})
			mois_retenu=mois_choisi
			$(".fleches_mois").show()
		}

	})

	$("body").on("mouseenter",".days",function(e){
		if ($("#icon_calendar").awidth()!=80) {
			$(this).css("font-size",20)
		};
	})
	$("body").on("mouseleave",".days",function(e){
		if (ok==1) {
			$(this).css("font-size",12)
		};
	})

	$("#icon_calendar").mouseenter(function(){
		if ($(this).awidth()==80) {
			$(this).css("transform","scale(1.1)")
		}
	})

	$("#icon_calendar").mouseleave(function(){
		if ($(this).awidth()==80) {
			$(this).css("transform","scale(1)")
		}
	})

	$(".fleches_mois").click(function() {
		var direct=eval($(this).attr("value"))
		var ladate=new Date()
		if (direct==-1 && mois_choisi>1)
		{
			$("#month"+(mois_choisi+1)).css({marginLeft:230,opacity:0.15,textAlign:"left"})
			$("#month"+(mois_choisi)).css({marginLeft:130,opacity:0.15,textAlign:"left"})
			$("#month"+(mois_choisi-1)).css({marginLeft:30,opacity:1,textAlign:"center"})
			$("#month"+(mois_choisi-2)).css({marginLeft:-70,opacity:0.15,textAlign:"right"})
			mois_choisi--
			$scope.jours=[]
			for (var i = 1; i <=$scope.mois[mois_choisi-1]['days']; i++) {$scope.jours.push({day:i})}
			$scope.$apply()
			$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
			if (mois_choisi==ladate.getMonth()+1) {
				$("#day"+ladate.getDate()).css({backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
			};
			if (mois_choisi==1) {$("#fleche_mois1").hide()}
			else{$(".fleches_mois").show()}
		}

		else if (direct==1 && mois_choisi<12)
		{
			$("#month"+(mois_choisi-1)).css({marginLeft:-170,opacity:0.15,textAlign:"right"})
			$("#month"+(mois_choisi)).css({marginLeft:-70,opacity:0.15,textAlign:"right"})
			$("#month"+(mois_choisi+1)).css({marginLeft:30,opacity:1,textAlign:"center"})
			$("#month"+(mois_choisi+2)).css({marginLeft:130,opacity:0.15,textAlign:"left"})
			mois_choisi++
			$scope.jours=[]
			for (var i = 1; i <=$scope.mois[mois_choisi-1]['days']; i++) {
				$scope.jours.push({day:i})
			}
			$scope.$apply()
			if (mois_choisi==ladate.getMonth()+1) {
				$("#day"+ladate.getDate()).css({backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
			}
			$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
			if (mois_choisi==12) {$("#fleche_mois2").hide()}
			else{$(".fleches_mois").show()}
		}
		return false
	})

	var ladate= new Date()
	var mois_choisi=ladate.getMonth()+1
	var jour_choisi=ladate.getDate()

	$scope.mois=[
	{name:"January",days:31},
	{name:"Febrary",days:28},
	{name:"March",days:31},
	{name:"April",days:30},
	{name:"May",days:31},
	{name:"June",days:30},
	{name:"July",days:31},
	{name:"August",days:31},
	{name:"September",days:30},
	{name:"October",days:31},
	{name:"November",days:30},
	{name:"December",days:31}]
	var ok=0
	$scope.jours=[]
	for (var i = 1; i <=$scope.mois[mois_choisi-1]['days']; i++) {
		$scope.jours.push({day:i})
	}

	setTimeout(function(){
		for (var i = 1; i <=12; i++) {
			var j=mois_choisi-i
			if (j==0) {$("#month"+i).css({marginLeft:0,opacity:1,textAlign:"center",display:"block"})}
			else if (j==1) {$("#month"+i).css({marginLeft:-70,opacity:0.15,textAlign:"right"})}
			else if (j>0) {$("#month"+i).css({marginLeft:-170,opacity:0.15,textAlign:"right"})}
			else if (j==-1) {$("#month"+i).css({marginLeft:130,opacity:0.15,textAlign:"left "})}
			else if (j<0) {$("#month"+i).css({marginLeft:230,opacity:0.15,textAlign:"left "})}
		}
	})

	$scope.$apply()

	setTimeout(function(){
		$("#day"+jour_choisi).css({
			position:"absolute",
			fontSize:30,
			awidth:"100%",
			display:"block"
		})
	},10)

}]);

Việc hiểu và sử dụng tốt angular.js cần có thời gian, nhưng cách học tốt nhất là hãy bắt đầu bằng những ứng dụng nhỏ thế này. Mình mong là các bạn có thể áp dụng ứng dụng này vào trong website hay blog của các bạn.

Chúc các bạn thành công !

Tags: angular.js date picker ung dung web web app

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

Trần Trung Dũng

15 chủ đề

2610 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024