0928_Javascript : 내장객체 - Date :: 개발새발, 써놓기

0928_Javascript : 내장객체 - Date

호쏘2 2021. 9. 28. 19:38

2021. 9. 28. 19:38

Date 객체

- 날짜와 시간을 다루는 데 사용되는 객체로 new 연산자를 사용하여 객체 타입을 만든다.

- Date 객체는 1970년 1월 1일UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타낸다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var now = new Date();

var y = now.getFullYear(); // 년도
var m = now.getMonth() + 1; // 월(getMonth() : 0~11)
var d = now.getDate(); // 일자
var w = now.getDay(); // 요일(0(일)~6(토))

var hr = now.getHours();
var mn = now.getMinutes();
var sc = now.getSeconds();

var ms = now.getTime(); // 1970-01-01 00:00:00 부터 경과 시간 (단위 : ms)

var s = y + '-' + m + '-' + d + '   ' + hr + ":" + mn + ":" + sc;

console.log(s, w);
console.log(ms);

</script>

</head>
<body>

<h3>내장객체 - Date</h3>

</body>
</html>

매개변수 생성자를 이용한 객체 생성 - 입력한 날로 객체생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
var y, m, d, s;
var date;

// 2021-12-25 로 Date() 객체 생성
// date = new Date(); // 현재 컴퓨터시스템의 날짜로 객체 생성
date = new Date(2021, 12-1, 25);
y = date.getFullYear(); 
m = date.getMonth() + 1; 
d = date.getDate();
s = y + "-" + m + "-" + d;
console.log(s);

// 2021-09-31 로 Date() 객체 생성 - 9월 31일은 10월 1일로 설정
date = new Date(2021, 9-1, 31);
y = date.getFullYear(); 
m = date.getMonth() + 1; 
d = date.getDate();
s = y + "-" + m + "-" + d;
console.log(s);

// 날짜를 50일로 설정
date.setDate(50);
y = date.getFullYear(); 
m = date.getMonth() + 1; 
d = date.getDate();
s = y + "-" + m + "-" + d; // 2021-11-19
console.log(s);
</script>

</head>
<body>

<h3>내장객체 - Date</h3>

</body>
</html>

활용 시스템의 현재 시간 확인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="style.css?v=1" type="text/css">

<script type="text/javascript">
function showClock() {
	var now = new Date();
	var y = now.getFullYear();
	var m = now.getMonth()+1;
	var d = now.getDate();
	if(m < 10) m = "0" + m;
	if(d < 10) d = "0" + d;
	
	var hr = now.getHours();
	var mn = now.getMinutes();
	var sc = now.getSeconds();
	if(hr < 10) hr = "0" + hr;
	if(mn < 10) mn = "0" + mn;
	if(sc < 10) sc = "0" + sc;
	
	var s = y + "-" + m + "-" + d + "  " + hr + ":" + mn + ":" + sc;
	document.getElementById("nowDate").value = s;
	
	setTimeout("showClock()", 1000);
}

window.onload = () => showClock();

</script>

</head>
<body>

<div style="margin: 30px auto; width: 200px; text-align: center;">
	<h3>시스템 현재 시간</h3>
	<input type="text" id="nowDate" readonly="readonly" style="border: none;">
</div>

</body>
</html>

활용 - 날짜 형식 검사 (정규식 활용)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<script type="text/javascript">
// 날짜 형식 검사
function isValidDateFormat(date) {
	if(date.length !=8 && date.length != 10) return false;
	
	var p = /(\.)|(\-)|(\/)/g;
	date = date.replace(p, "");
	
	var format = /^[12][0-9]{7}$/;
	if(! format.test(date) ) return false;
	// test : 정규식에 올바르면 true, 올바르지않으면 false를 반환하는 함수 
	
	var y = parseInt( date.substr(0, 4) );
	var m = parseInt( date.substr(4, 2) );
	var d = parseInt( date.substr(6) );
	
	if(m<1 || m>12) return false;
	
	var lastDay = (new Date(y,m,0)).getDate();
	if(d<1 || d>lastDay) return false;
	
	return true;
}


function result() {
	var s = document.getElementById("inputs").value;
	
	if(! isValidDateFormat(s)){
		alert("날짜를 정확히 입력 하세요");
		document.getElementById("inputs").focus();
		return;
	}
	
	alert(s + " : 날짜 형식을 올바르게 입력 했습니다.");
}
</script>

</head>
<body>

<p>
	날짜 : <input type="text" id="inputs">
	<button type="button" onclick="result();">확인</button>
</p>


</body>
</html>

2021-02-30을 입력하면 뜨는 창

활용 - 달력 만들기 (1)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: '맑은 고딕', 나눔고딕, 돋움, sans-serif;
}

#calendarLayout {
	width: 280px;
	margin: 30px auto;
}

#calendarLayout .subject {
	height: 37px;
	line-height: 37px;
	text-align: center;
	font-weight: 600;
}

#calendarLayout table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

#calendarLayout table td {
	padding: 10px;
	text-align: center;
	border: 1px solid #ccc;
}

#calendarLayout table td:nth-child(7n+1) {
	color: red;
}

#calendarLayout table td:nth-child(7n) {
	color: blue;
}

#calendarLayout table td.gray {
	background: #ccc;
}

#calendarLayout table td.today {
	background: #e6ffff;
}

.subject span {
	cursor: pointer;
}

.subject span:hover {
	color: tomato;
}

</style>

<script type="text/javascript">
function calendar(y, m) {
	var date = new Date(y, m-1, 1);
	y = date.getFullYear();
	m = date.getMonth()+1;
	
	var w = date.getDay(); // 요일:0~6
	var week = ["일","월","화","수","목","금","토"]; // 배열
	
	// 시스템 오늘 날짜
	var now = new Date();
	var ny = now.getFullYear();
	var nm = now.getMonth()+1;
	var nd = now.getDate();
	
	var out = "<div class='subject'>";
	out+= "<span onclick='calendar("+y+","+(m-1)+")'>&lt;</span>&nbsp;&nbsp;";
	out+= "<label>"+y+"년 "+m+"월 </label>";
	out+="&nbsp;&nbsp;<span onclick='calendar("+y+","+(m+1)+")'>&gt;</span>";
	out+="</div>";
	
	out+="<table>";
	out+="<tr>";
	for(var i=0; i<week.length;i++){
		out+="<td>"+week[i]+"</td>";
	}
	out+="</tr>";
	
	// 1일 앞부분
	out+="<tr>";
	for(var i =0; i<w;i++){
		out+="<td>&nbsp;</td>";
	}
	
	// 2021년 10월의 마지막 일자는 ? (new Date(2021, 10, 0)).getDate(); 11월 0일(10월 31일)
	var lastDay = (new Date(y, m, 0)).getDate();
	var cls;
	for(var i=1; i<=lastDay; i++) {
		cls = "";
		if(y=ny&&m==nm&&i==nd) cls =" today ";
		
		out +="<td class = '"+cls+"'>"+i+"</td>";
		if(i != lastDay && ++w%7==0) {
			out+="</tr><tr>";
		}
	}
	
	// 마지막 날짜 부분
	for(var i=w%7; i<6; i++) {
		out+="<td>&nbsp;</td>";
	}		
	out+="</tr>";		
	
	out+="</table>";
	
	document.getElementById("calendarLayout").innerHTML = out;
}

window.onload = function(){
	var now = new Date();
	var y = now.getFullYear();
	var m = now.getMonth()+1;
	calendar(y, m);
}


</script>

</head>
<body>

<div id="calendarLayout"></div>

</body>
</html>

활용 - 달력 만들기(2) 이전달과 다음달의 일자도 표시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 14px;
	font-family: '맑은 고딕', 나눔고딕, 돋움, sans-serif;
}

#calendarLayout {
	width: 280px;
	margin: 30px auto;
}

#calendarLayout .subject {
	height: 37px;
	line-height: 37px;
	text-align: center;
	font-weight: 600;
}

#calendarLayout table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

#calendarLayout table td {
	padding: 10px;
	text-align: center;
	border: 1px solid #ccc;
}

#calendarLayout table td:nth-child(7n+1) {
	color: red;
}

#calendarLayout table td:nth-child(7n) {
	color: blue;
}

#calendarLayout table td.gray {
	color: #ccc;
}

#calendarLayout table td.today {
	background: #e6ffff;
}

.subject>span, .footer>span {
	cursor: pointer;
}

.subject>span:hover, .footer>span:hover {
	color: tomato;
}

.footer {
	height: 25px; line-height: 25px;
	text-align: right;
	font-size: 12px;

	padding-right: 3px;
}

</style>

<script type="text/javascript">
function calendar(y, m) {
	var date = new Date(y, m-1, 1);
	y = date.getFullYear();
	m = date.getMonth()+1;
	
	var w = date.getDay(); // 요일:0~6
	var week = ["일","월","화","수","목","금","토"]; // 배열
	
	// 시스템 오늘 날짜
	var now = new Date();
	var ny = now.getFullYear();
	var nm = now.getMonth()+1;
	var nd = now.getDate();
	
	var out = "<div class='subject'>";
	out+= "<span onclick='calendar("+y+","+(m-1)+")'>&lt;</span>&nbsp;&nbsp;";
	out+= "<label>"+y+"년 "+m+"월 </label>";
	out+="&nbsp;&nbsp;<span onclick='calendar("+y+","+(m+1)+")'>&gt;</span>";
	out+="</div>";
	
	out+="<table>";
	out+="<tr>";
	for(var i=0; i<week.length;i++){
		out+="<td>"+week[i]+"</td>";
	}
	out+="</tr>";
	
	// 1일 앞부분 : 이전달
	var preDate = new Date(y, m-1, 0); // 이전달의 마지막 날짜로 Date 객체 생성
	// var preYear = preDate.getFullYear();
	// var preMonth = preDate.getMonth()+1;
	
	var preLastDay = preDate.getDate();
	var preDay = preLastDay - w + 1;
	
	out+="<tr>";
	for(var i =0; i<w;i++){
		out+="<td class='gray'>"+(preDay+i)+"</td>"; // ++preday도 가능
	}
	
	// 2021년 10월의 마지막 일자는 ? (new Date(2021, 10, 0)).getDate(); 11월 0일(10월 31일)
	var lastDay = (new Date(y, m, 0)).getDate();
	var cls;
	for(var i=1; i<=lastDay; i++) {
		cls = "";
		if(y=ny&&m==nm&&i==nd) cls =" today ";
		
		out +="<td class = '"+cls+"'>"+i+"</td>";
		if(i != lastDay && ++w%7==0) {
			out+="</tr><tr>";
		}
	}
	
	// 마지막 날짜 부분
	var nextDay = 0;
	for(var i=w%7; i<6; i++) {
		out+="<td class='gray'>"+ (++nextDay) +"</td>";
	}		
	out+="</tr>";		
	
	out+="</table>";
	
	out+="<div class='footer'><span onclick='calendar("+ny+","+nm+")'>오늘날짜로</span></div>";
	
	document.getElementById("calendarLayout").innerHTML = out;
}

window.onload = function(){
	var now = new Date();
	var y = now.getFullYear();
	var m = now.getMonth()+1;
	calendar(y, m);
}


</script>

</head>
<body>

<div id="calendarLayout"></div>

</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0929_Javascript : 내장객체 - Set, Map (0)	2021.10.01
0929_Javascript : 내장 객체 - Array 객체 (0)	2021.10.01
0927_Javascript : 내장객체 - String (0)	2021.09.28
0927_Javascript : 예외처리 (0)	2021.09.28
0927_Javascript : 화살표 함수 (0)	2021.09.28

+ Recent posts

Powered by Tistory, Designed by wallel

티스토리툴바