개발자 미니민의 개발스터디

[javascript] 일자별(날짜별) 거래내역 조회버튼 만들기

by mini_min

프로젝트 실습/[Project] JavaScript

✔️ 일자별(날짜별) 거래내역 조회버튼

: DOM 에 onclick 속성 이용

: Date() 객체 이용

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

button {
	color: #333;
	border: 1px solid #999;
	background-color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}
button:active, button:focus, button:hover {
	background-color: #f8f9fa;
	color:#333;
}

input {
	color: #333;
	border: 1px solid #999;
	background-color: #fff;
	padding: 5px 5px;
	border-radius: 4px;
	font-weight: 500;
	cursor:pointer;
	font-size: 14px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
	vertical-align: baseline;
}


</style>

</head>
<body>

<form>
<p>
	<button type="button" id="tday" >오늘</button>
	<button type="button" id="week">1주일</button>
	<button type="button" id="month">1개월</button>
	<button type="button" id="month3">3개월</button>
	<button type="button" id="month6">6개월</button>
	<button type="button" id="year">1년</button>
		<input type="text" id="sdate"> ~ <input type="text" id="edate">
	<button type="button" id="result">검색</button>
</p>
</form>


<script type="text/javascript">

//오늘
document.getElementById("tday").onclick = function(){
	let now = new Date();
	let ty = now.getFullYear();
	let tm = now.getMonth() + 1;
	let td = now.getDate();
	
	if(tm < 10) tm = "0" + tm;
	if(td < 10) td = "0" + td;
	
	let s = ty + "-" + tm + "-" +td;
	
	document.querySelector("#sdate").value = s;
	document.querySelector("#edate").value = s;
};

//1주일
document.getElementById("week").onclick = function(){
	let now = new Date();
	let ty = now.getFullYear();
	let tm = now.getMonth() +1 ;
	let td = now.getDate();
	
	let now2 = new Date(ty,tm-1,td+7);
	let ey = now2.getFullYear();
	let em = now2.getMonth() +1 ;
	let ed = now2.getDate();
	
	
	if(tm < 10) tm = "0" + tm;
	if(td < 10) td = "0" + td;
	
	if(em < 10) em = "0" + em;
	if(ed < 10) ed = "0" + ed;
	
	let s = ty + "-" + tm + "-" + td;
	let e = ey + "-" + em + "-" + ed;
	
	document.querySelector("#sdate").value = s;
	document.querySelector("#edate").value = e;
};

//1개월
document.getElementById("month").onclick = function(){
	let now = new Date();
	let ty = now.getFullYear();
	let tm = now.getMonth() +1 ;
	let td = now.getDate();
	
	let now2 = new Date(ty,tm,td);
	let ey = now2.getFullYear();
	let em = now2.getMonth() +1 ;
	let ed = now2.getDate();
	
	
	if(tm < 10) tm = "0" + tm;
	if(td < 10) td = "0" + td;
	
	if(em < 10) em = "0" + em;
	if(ed < 10) ed = "0" + ed;
	
	let s = ty + "-" + tm + "-" + td;
	let e = ey + "-" + em + "-" + ed;
	
	document.querySelector("#sdate").value = s;
	document.querySelector("#edate").value = e;
};


//3개월
document.getElementById("month3").onclick = function(){
	let now = new Date();
	let ty = now.getFullYear();
	let tm = now.getMonth() +1 ;
	let td = now.getDate();
	
	let now2 = new Date(ty,tm-1+3,td);
	let ey = now2.getFullYear();
	let em = now2.getMonth() +1 ;
	let ed = now2.getDate();
	
	
	if(tm < 10) tm = "0" + tm;
	if(td < 10) td = "0" + td;
	
	if(em < 10) em = "0" + em;
	if(ed < 10) ed = "0" + ed;
	
	let s = ty + "-" + tm + "-" + td;
	let e = ey + "-" + em + "-" + ed;
	
	document.querySelector("#sdate").value = s;
	document.querySelector("#edate").value = e;
};

//6개월
document.getElementById("month6").onclick = function(){
	let now = new Date();
	let ty = now.getFullYear();
	let tm = now.getMonth() +1 ;
	let td = now.getDate();
	
	let now2 = new Date(ty,tm-1+6,td);
	let ey = now2.getFullYear();
	let em = now2.getMonth() +1 ;
	let ed = now2.getDate();
	
	
	if(tm < 10) tm = "0" + tm;
	if(td < 10) td = "0" + td;
	
	if(em < 10) em = "0" + em;
	if(ed < 10) ed = "0" + ed;
	
	let s = ty + "-" + tm + "-" + td;
	let e = ey + "-" + em + "-" + ed;
	
	document.querySelector("#sdate").value = s;
	document.querySelector("#edate").value = e;
};

//1년
document.getElementById("year").onclick = function(){
	let now = new Date();
	let ty = now.getFullYear();
	let tm = now.getMonth() +1 ;
	let td = now.getDate();
	
	let now2 = new Date(ty+1,tm-1,td);
	let ey = now2.getFullYear();
	let em = now2.getMonth() +1 ;
	let ed = now2.getDate();
	
	
	if(tm < 10) tm = "0" + tm;
	if(td < 10) td = "0" + td;
	
	if(em < 10) em = "0" + em;
	if(ed < 10) ed = "0" + ed;
	
	let s = ty + "-" + tm + "-" + td;
	let e = ey + "-" + em + "-" + ed;
	
	document.querySelector("#sdate").value = s;
	document.querySelector("#edate").value = e;
};


document.getElementById("result").onclick = function(){
	let startdate = document.getElementById("sdate").value;
	let enddate = document.getElementById("edate").value;
	
	let sy = parseInt(startdate.substring(0,4));
	let sm = parseInt(startdate.substring(5,7));
	let sd = parseInt(startdate.substring(8));
	
	let ey = parseInt(enddate.substring(0,4));
	let em = parseInt(enddate.substring(5,7));
	let ed = parseInt(enddate.substring(8));
	
	let sdate = new Date(sy,sm-1,sd);
	let edate = new Date(ey,em-1,ed);
	
	let st = sdate.getTime();
	let et = edate.getTime();
	
	let dif = et - st;
	
	if(dif < 0) {
		alert("종료 시점보다 오래된 날짜 입력 불가");
		document.getElementById("sdate").focus;
	} else {
		alert("성공!");
	}
	
	
}




</script>

</body>
</html>

'프로젝트 실습 > [Project] JavaScript' 카테고리의 다른 글

[javascript] 테이블 노드 복제하기  (0) 2022.09.26
[javascript] input 값 실시간 자동감지 (총점/평균)  (0) 2022.09.26
[javascript] 성적처리 폼 만들기 (유효성 검사)  (1) 2022.09.25
[javascript] 디데이, 나이 계산 폼 만들기  (0) 2022.09.22
[javascript] 로또 프로그램 만들기 (indexOf 활용)  (0) 2022.09.21

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기

티스토리툴바