[jquery] 조회 버튼 1개월, 일주일, 1일전, 오늘, 달력 클릭 시 이벤트 코드 정리

1. 버튼 영역

<dd><a href="#none" class="btn md white btnSearchPeriod" data-type="1">1개월</a></dd>
<dd><a href="#none" class="btn white btnSearchPeriod" data-type="2">일주일</a></dd>
<dd><a href="#none" class="btn white btnSearchPeriod" data-type="3" >1일전</a></dd>
<dd><a href="#none" class="btn white btnSearchPeriod" data-type="4" >오늘</a></dd>
<dd><input type="date" id="startDt" name="startDt" ></dd>
<dd><span>~</span></dd>
<dd><input type="date" id="endDt" name="endDt" value=""></dd>

 

 

 

2. script 영역

1) 시작일 세팅

// 시작 날짜 지정 (일주일 전으로 세팅)
var linkDtString = "${commandMap.linkDt}"; // commandMap.linkDt 문자열로 가정
var linkDt = new Date(linkDtString); // 문자열을 날짜 객체로 변환
linkDt.setDate(linkDt.getDate() - 7); // 일주일 전의 날짜 설정
var oneWeekBefore = linkDt.toISOString().split("T")[0];
$("#startDt").val(oneWeekBefore);

 

 

 

2) 1개월, 일주일, 1일전, 오늘 버튼 클릭 이벤트

$(".btnSearchPeriod").on("click", function(e) {
	e.preventDefault();
	var dataType = $(this).data("type");
	
	$("#endDt").val(getDate("0"));
	
	if (dataType === 1) {
	    $("#startDt").val(getDate("1"));
	} else if (dataType === 2) {
	    $("#startDt").val(getDate("2"));
	} else if (dataType === 3) {
	    $("#startDt").val(getDate("3"));
	} else if (dataType === 4) {
	    $("#startDt").val(getDate("4"));
	}
	// // 페이지 번호 초기화           
	$('#searchForm').find('input[name="movePage"]').val('1');
	dataLoad();
});

 

 

 

3) 날짜 지정 시 체인지 이벤트

 $("#startDt, #endDt").on("change", function() {
	var startDt = $("#startDt").val();
	var endDt = $("#endDt").val();
	
	if (startDt > endDt) {
		swal('기간을 다시 설정해주세요.', '', "error"); 
		$("#startDt").val(oneWeekBefore);
		$("#endDt").val("${}");
		// 페이지 번호 초기화
		$('#searchForm').find('input[name="movePage"]').val('1');
		dataLoad();
		return false;
	}
	$("#startDt").val(startDt);
	$("#endDt").val(endDt);

	// 페이지 번호 초기화
	$('#searchForm').find('input[name="movePage"]').val('1');
	dataLoad();
});

 

 

 

4) 1개월, 일주일, 1일전, 오늘 날짜 지정함수

function getDate(gbn) {
	var today = new Date();
	var year = today.getFullYear();
	var month = ('0' + (today.getMonth() + 1)).slice(-2);
	var day = ('0' + today.getDate()).slice(-2);
	var dateString = '';
	
	if (gbn == "1"){
	    month =  ('0' + (today.getMonth())).slice(-2);
	} else if (gbn == "2"){
		var oneWeekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
		year = oneWeekAgo.getFullYear();
		month = ('0' + (oneWeekAgo.getMonth() + 1)).slice(-2);
		day = ('0' + oneWeekAgo.getDate()).slice(-2);
	} else if (gbn == "3"){
		var yesterday = new Date(today.getTime() - 1 * 24 * 60 * 60 * 1000);
		year = yesterday.getFullYear();
		month = ('0' + (yesterday.getMonth() + 1)).slice(-2);
		day = ('0' + yesterday.getDate()).slice(-2);
	} else if (gbn == "4"){
	    day = ('0' + today.getDate()).slice(-2);
	}
	
	dateString = year + '-' + month  + '-' + day;
	return dateString;
}