[JavaScript] date(날짜)

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	//onload : 윈도우가 로드된 이후
	//window.onload=function(){}
	onload=function(){
		document.getElementsByTagName("button")[0].onclick = testDate01;
		document.getElementsByTagName("button")[1].onclick = testDate02;
		document.getElementsByTagName("button")[2].onclick = testDate03;
		document.getElementsByTagName("button")[3].onclick = testDate04;
		document.getElementsByTagName("button")[4].onclick = testDate05;
	}
	
	function testDate01(){
		var date = new Date();
	
		var inputDate = document.getElementById("today");
		inputDate.innerHTML = date.toDateString() + "<br>";
		inputDate.innerHTML += date.toLocaleDateString() + "<br>";
		inputDate.innerHTML += date.toLocaleString() + "<br>";
		inputDate.innerHTML += date.toLocaleTimeString() + "<br>";
	}
	
	function testDate02(){
		// id가 today인 태그의 innerHTML에
		// 2021/1/21/목요일
		var today = new Date();
		
		var year = today.getFullYear();
		var month = today.getMonth() + 1;
		var date = today.getDate();
		var day = today.getDay();
		
		var dayOfWeek = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
		
		document.getElementById("today").innerHTML = year + "/" + month + "/" + date +"/" + dayOfWeek[day];
	}
	
	function testDate03(){
		//2020 11 20
		var year = 2020;
		var month = 11;
		var date = 20;
		
		var start = new Date(year, month-1, date);
		
		document.getElementById("specific").innerHTML = start;
	}
	
	function testDate04(){
		var dates = document.getElementById("dates");
		var inputDate = document.querySelector("#inputDate");
		//var inputDate = document.getElementById("inputDate");		
		
		var dDay = new Date(dates.value);
		dDay.setDate(dDay.getDate() + parseInt(inputDate.value));
		
		document.getElementById("result").value = dDay.toLocaleDateString();
	}
	
	function testDate05(){
		var start = document.getElementById("start").value;
		var end = document.getElementById("end").value;
		
		var startDate = new Date(start);
		var endDate = new Date(end);
		
		var result = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
		document.getElementById("res").value = result;
	}
</script>

</head>
<body>

	<h1>오늘 날짜 출력하기</h1>
	<button>오늘날짜</button>
	<button>오늘날짜표현</button><br>
	<span id = "today"></span>
	
	
	
	<h1>특정 날짜 출력하기</h1>
	<button>특정날짜</button>
	<br>
	<span id="specific"></span>
	
	
	
	<h1>경과 날짜 출력하기</h1>
	<label>지정날짜</label>
	<input type="date" id="dates" size="50"><br>
	
	<label>경과일</label>
	<input type="number" id="inputDate"><br>
	
	<label>경과 후 날짜</label>
	<input type="text" id="result" readonly="readonly">
	<button>경과날짜</button>
	
	
	
	<h1>D-Day</h1>
	<label>시작 날짜</label>
	<input type="date" id="start" size="50"><br>
	<label>종료 날짜</label>
	<input type="date" id="end" size="50"><br>
	<label>남은 일수</label>
	<input type="text" id="res" readonly="readonly">
	<button>남은 일수 구하기</button><br>
	<!-- getTime() : milliseconds 반환 -->

</body>
</html>

해당 코드의 기본 실행 결과입니다.

function testDate01(){
	var date = new Date();
	
	var inputDate = document.getElementById("today");
	inputDate.innerHTML = date.toDateString() + "<br>";
	inputDate.innerHTML += date.toLocaleDateString() + "<br>";
	inputDate.innerHTML += date.toLocaleString() + "<br>";
	inputDate.innerHTML += date.toLocaleTimeString() + "<br>";
}

오늘날짜 버튼을 누르면 버튼 바로 아래 영역에 다양한 표현형식으로 날짜나 시간이 나옵니다!

function testDate02(){
	// id가 today인 태그의 innerHTML에
	// 2021/1/21/목요일
	var today = new Date();
		
	var year = today.getFullYear();
	var month = today.getMonth() + 1;
	var date = today.getDate();
	var day = today.getDay();
		
	var dayOfWeek = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
		
	document.getElementById("today").innerHTML = year + "/" + month + "/" + date +"/" + dayOfWeek[day];
}

두번째 버튼인 오늘날짜표현 버튼을 누르면 아래 영역이 위의 사진과 같이 바뀝니다!

function testDate03(){
	//2020 11 20
	var year = 2020;
	var month = 11;
	var date = 20;
		
	var start = new Date(year, month-1, date);
		
	document.getElementById("specific").innerHTML = start;
}

3번째 버튼인 특정날짜 버튼을 누른뒤 결과입니다.

<h1>경과 날짜 출력하기</h1>
<label>지정날짜</label>
<input type="date" id="dates" size="50"><br>
	
<label>경과일</label>
<input type="number" id="inputDate"><br>
	
<label>경과 후 날짜</label>
<input type="text" id="result" readonly="readonly">
<button>경과날짜</button>

해당 함수는 지정날짜를 정해주고 경과일을 정해주면 지정날짜에서 경과일이 지나면 며칠인지를 나타내줍니다.

function testDate05(){
	var start = document.getElementById("start").value;
	var end = document.getElementById("end").value;
		
	var startDate = new Date(start);
	var endDate = new Date(end);
		
	var result = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
	document.getElementById("res").value = result;
}

마지막 5번째 버튼은 시작날짜와 종료날짜를 정해주면 남은 일수를 구해주는 버튼입니다!

728x90

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] String(문자열 합치기, 동등연산자(==), === 연산자 등) (0)	2022.01.19
[JavaScript] math (0)	2022.01.18
[JavaScript] TransObject(형변환) (0)	2022.01.16
[JavaScript] NumberObject (0)	2022.01.15
[JavaScript] Object(오브젝트 / 객체) (0)	2022.01.14

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바