본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

프론트엔드3-5. javascript의 내장객체 date와 달력만들기예제

by 이쟝 2022. 2. 9.

Date객체와 날짜

  • 날짜와 시간을 표시하는 객체
  • Date 객체를 활용하면 생성 및 수정 시간을 저장하거나 시간을 측정할 수 있고, 현재 날짜를 출력하는 용도 등으로도 활용할 수 있다.
  • Date 객체엔 '날짜만' 혹은 '시간만' 저장하는ㄴ것은 불가능 하고, 항상 날짜와 시간이 함께 저장된다.
  • 월(Month), 요일(week)은 0부터 시작한다. (1월:0, 일요일:0)

객체 생성하기

  • new Date( ) : 인수없이 호출하면 현재 날짜와 시간이 저장된 Date 객체 반환
  • new Date(milliseconds) : UTC를 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리초를 반환

 

예제) 

<body>
	<script>
	
		var now = new Date();
		document.write("현재날짜와시간 -> " + now, "<br/>"); 
		
		var date = new Date('2022.02.14'); 
		var date1 = new Date("2022-02-14");  
		var date2 = new Date('2022/02/14 12:15'); 
		var date3 = new Date(4562);  // 4562 : 4.x초 밀리초: 초*1000
		
		document.write("<br/>date -> " + date, "<br/>"); 
		document.write("date1 -> ", date1, "<br/>"); 
		document.write("date2 -> " + date2 + "<br/>");
		document.write("date3 -> " + date3);
			
	</script>
</body>

날짜(년, 월, 일, 요일)와 시간(시 분 초)  

  • new Date(year, month, date, hours, minutes, seconds, ms) (year와 month는 필수 값)
  • year는 반드시 네 자리 숫자여야 한다. date에 값이 없는 경우엔 1일로 처리한다. 
  • hours/minutes/seconds/ms에 값이 없는 경우엔 0으로 처리된다. 

 

Date 객체의 메서드

 

getFullYear( ) 연도(네자릿 수 반환)
getMonth( ) 월을 반환(0(1월)이상 11(12월)이하)
getDate( )  일을 반환(1이상 31이하)
getDay( )  요일을 반환(0(일요일)부터 6(토요일)까지)
getHours( ) 시간을 반환
getMinutes( ) 분을 반환
getSeconds( ) 초를 반환
getMilliseconds() 밀리초 반환

 

예제) 현재날짜 구하기

<body>
	<script>
		
		var now = new Date();
		
		// 년도, 월, 일, 요일, 시, 분, 초
		var year = now.getFullYear();
		var month = now.getMonth()+1; // 0 -> 1일
		var date = now.getDate();
		var day = now.getDay();
		
		var hour = now.getHours();
		var minutes = now.getMinutes();
		var second = now.getSeconds();
		
		var week ="";
		switch(day) {
		case 0: week = "일"; break;
		case 1: week = "월"; break;
		case 2: week = "화"; break;
		case 3: week = "수"; break;
		case 4: week = "목"; break;
		case 5: week = "금"; break;
		case 6: week = "토"; break;
		}
		
		document.write(year,"-",month,"-",date," (",week,") ",hour,":",minutes,":",second);

	</script>
</body>

 

예제2) 2022년 2월 22일 오전 3시 12분 구해서 alert 함수를 이용해 생성한 객체 출력

<body>
	<script>
		var d1 = new Date(2022,1,22,3,12);
		var d2 = new Date("2022 2 22 03:12:00"); //위와 동일
		var d3 = new Date("February 22, 2022 03:12:00"); //위와 동일
		alert(d1);
		alert(d2);
		alert(d3);
	</script>
</body>

 

예제3) 날짜를 입력하면 ‘MO’, ‘TU’, ‘WE’, ‘TH’, ‘FR’, ‘SA’, ‘SU’ 형식으로 요일을 보여주는 함수 구현

<body>
	<script>
		var date = new Date(2022, 1, 9);
		document.write(getWeekDay(date));
		
		function getWeekDay(date) {
			var days = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];		
			return days[date.getDay()];
		}
	</script>
<body>

 

예제4) 특정 달의 마지막 일을 반환하는 함수를 구현 (반환 값은 30이나 31, 29(2월), 28(월) 중 하나)

<body>
	<script>

		function getLastDayOfMonth(year, month) {
			var date = new Date(year, month+1, 0);
			return date.getDate();
		}
		
		document.write(getLastDayOfMonth(2022, 1),"<br/>");  // 2월 28일
		document.write(getLastDayOfMonth(2022, 2),"<br/>");  // 3월 31일
		document.write(getLastDayOfMonth(2022, 3));          // 4월 30일
		
	</script>
</body>
  • new Date의 세 번째 매개변수(date)의 기본값은 1이다. 어떤 숫자를 넘겨줘도 자바스크립트는 이를 자동 조정해줍니다. 0을 넘기면 '첫 번째 일의 1일 전’을 의미하게 된다. 이는 '이전 달의 마지막 일’과 동일하다. 

달력만들기

1. html 파일로 구조 만들기

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>calendar</title>
</head>
<body>
	<div id="calendar">
		<h2 id="calendarTitle">2022년 2월</h2>
		<img src="../img/dog4.jpg"/>
		<ul id="dateview"></ul>	
	</div>
</body>
</html>

2. <style>로 디자인 구현

	<style>
		#calendar {
			width:300px;
			border: 2px solid #ddd;
			margin:0 auto;
		}
		#calnedar>h2 { text-align:center; }
		img { width:100%; }
	</style>
더보기
더보기

 1) 현재 <div id="calendar">의 부분(핑크색은 보기 위해서)

 2) div 전체 부분 가운데 정렬, h2부분 가운데 정렬, 이미지 div에 꽉차게(가로로)

	<style>
		#calendar {
			background:pink;
			width:300px;
			border: 2px solid #ddd;
			margin:0 auto;
		}
		#calnedar>h2 { text-align:center; }
		img { width:100%; }
	</style>

 

 

3. <script>로 동적 구현(dateview)

  • 먼저 구해야 할 것: 년, 월, 일, 이번달 1일의 요일, 이번달의 마지막 날짜와 요일
  • 페이지에 접속하자마자 바로 뜨게하기 (onload이벤트로!) -> <body onload="함수명( )")
  • 여기서 함수는 "setCalendar( )"로 설정했다.
	<script>
		function setCalendar() {
			// 현재 날짜 구하기 
			var now = new Date();
			
			var year = now.getFullYear();
			var month = now.getMonth(); 
			var date = now.getDate();
			
			// 이번달 1일에 대한 요일
			var firstDay = new Date(year, month, 1).getDay();
			
			// 이번달 마지막 날 구하기(이번달을 기준으로 다음달 0일 날짜 객체로 만든다.)
			// month+1 -> 다음달
			var lastDay = new Date(year, month+1, 0).getDate();
			
			// 년월 셋팅
			document.querySelector("#calendarTitle").innerText = year + "년 "+ (month+1) + "월";
			
			// 요일 세팅
			var weekName = ['일', '월', '화', '수', '목', '금', '토'];
			var dateTag = "";
			for(var i=0; i<weekName.length; i++) {
				dateTag += "<li>"+weekName[i]+"</li>";
			}
			
			// 공백추가(이번달 첫번째 요일에 1일이 들어가야 함)
			for(var i=0; i<firstDay; i++) {
				dateTag += "<li>&nbsp;</li>";
			}
			
			// 날짜 세팅
			for(var i=1; i<=lastDay; i++) {
				if(date==i) {  // 출력한 날짜가 오늘이면 빨간색으로
					dateTag += "<li class='txtRed'>"+i+"</li>";
				}else {   // 아니면 그냥 출력
					dateTag += "<li>"+i+"</li>";
				}
			}
			document.getElementById("dateview").innerHTML = dateTag;
			}
	</script>
    </head>
<body onload = "setCalendar()">
더보기
더보기
  • 먼저 현재 날짜의 년, 월, 일을 구하고 이번달 1일의 요일, 이번달 마지막 날짜의 요일을 구한다.
	<script>
		function setCalendar() {
			// 현재 날짜 구하기 
			var now = new Date();
			
			var year = now.getFullYear();
			var month = now.getMonth(); 
			var date = now.getDate();
			
			// 이번달 1일에 대한 요일
			var firstDay = new Date(year, month, 1).getDay();
			
			// 이번달 마지막 날 구하기(이번달을 기준으로 다음달 0일 날짜 객체로 만든다.)
			// month+1 -> 다음달
			var lastDay = new Date(year, month+1, 0).getDate();
		}
	</script>
  • <h2>의 년월을 css로 하지않고 동적으로 바꾼다.(js로) -> 년도와 월 세팅
// 년월 셋팅
document.querySelector("#calendarTitle").innerText = year + "년 "+ (month+1) + "월";
  • 달력에 넣을 요일 세팅
    1. 요일 배열을 생성한다. 
    2. for문을 돌리고 <li>를 생성한다. 
    3. 확인을 위해서 console에 찍어본다
    4. 확인이 되면 console.log는 지운다. 
// 요일 세팅
var weekName = ['일', '월', '화', '수', '목', '금', '토'];
		
var dateTag = "";
			
for(var i=0; i<weekName.length; i++) {
	dateTag += "<li>"+weekName[i]+"</li>";
}
console.log(dateTag);

//weekName.forEach(week => { // foreach문
//	dateTag += "<li>"+weekName[i]+"</li>"; });
  • 날짜를 1부터 마지막 날까지 <li>로 생성,
    1. for문으로 <li>를 추가해준다. 일은 1부터 마지막 날까지
    2. 만약 출력한 날짜(일)가 오늘이면 빨간색으로 한다.(css에 추가)
    3. console.log(dateTag)로 확인해보고 되면 지운다.
<style>
	.txtRed{color:red;}
</style>
<script>
    for(var i=1; i<=lastDay; i++) {
            if(date==i) {  // 출력한 날짜가 오늘이면 빨간색으로
                dateTag += "<li class='txtRed'>"+i+"</li>";
            }else {   // 아니면 그냥 출력
                dateTag += "<li>"+i+"</li>";
            }
    }
    console.log(dateTag);
</script>
현재 2월이어서 28일까지 나온다.
  • <ul id="dateview"><ul>에 요일과 일 <li>을 innerHTML로 넣어준다. (for문 바로 밑에)
document.getElementById("dateview").innerHTML = dateTag;
  • 요일과 날짜가 잘 출력되었지만 이번달 1일에 대한 요일에 날짜를 넣어줘야 하기 때문에 토요일 뒤에 공백이 필요하다. (처음에 1일에 대한 요일을 구해놓음 firstDay 변수!) 
  • 순서가 중요하기 때문에 dateview에 넣어주기 전에 공백을 추가해주고 넣어줘야 한다. 
    1. for문을 통해 first만큼 공백을 추가한다.
    2. 공백은 &nbsp;로 추가한다. 
// 요일 세팅
var weekName = ['일', '월', '화', '수', '목', '금', '토'];
var dateTag = "";
for(var i=0; i<weekName.length; i++) {
	dateTag += "<li>"+weekName[i]+"</li>";
}

// 공백추가(이번달 첫번째 요일에 1일이 들어가야 함)
for(var i=0; i<firstDay; i++) { // for문은 요일만큼 실행
	dateTag += "<li>&nbsp;</li>";
}
			
// 날짜 세팅
for(var i=1; i<=lastDay; i++) {
	if(date==i) {  // 출력한 날짜가 오늘이면 빨간색으로
		dateTag += "<li class='txtRed'>"+i+"</li>";
	}else {   // 아니면 그냥 출력
		dateTag += "<li>"+i+"</li>";
	}
}
document.getElementById("dateview").innerHTML = dateTag;

 

4. <CSS>로 디자인 구현

	<style>
		#calendar {
			width:300px;
			border: 2px solid #ddd;
			margin:0 auto;
			overflow:auto;
		}

		#calendar>h2 {text-align:center;}
		img { width:100%; }
		
		.txtRed {color:red;}
		ul,li{margin:0; padding:0; list-style-type:none;}
		#calendar>ul>li{float:left; width:14.2%; text-align:center;}
	</style>
더보기
더보기
  • <ul>과 <li>를 정렬해주기 위해서 먼저 초기화 한다. 
ul,li{margin:0; padding:0; list-style-type:none;}
  • li를 가로로 정렬해준다.
#calendar>ul>li{float:left;}
  • div를 빠져나오게 되기 때문에 div에 공간을 확보하게 해주어야 한다!
<style>
		#calendar {
			....
			overflow:auto;
		}
		...
		#calendar>ul>li{float:left;}
</style>
  • 각각 <li>의 태그에 폭(넓이)를 설정해주고, 가운데 정렬!
#calendar>ul>li{float:left; width:14.2%; text-align:center;}

 

<참고>

https://ko.javascript.info/date#ref-74

 

저작자표시

'멀티캠퍼스 풀스택 과정 > 프론트엔드' 카테고리의 다른 글

프론트엔드3-7. [javascript] 팝업창띄우기 예제(window와 screen)  (0) 2022.02.10
프론트엔드3-6. javascript의 내장객체 BOM(브라우저객체모델)  (0) 2022.02.09
프론트엔드3-4. JavaScript의 내장객체 String, Math, Array  (0) 2022.02.09
프론트엔트3-3. login form 만들기 / 이메일 분리하기  (0) 2022.02.09
프론트엔드3-2. JavaScript의 함수(메서드)와 이벤트  (0) 2022.02.09

관련글

티스토리툴바