[jQuery] date타입 공통코드 만들기(자동 날짜 설정 (오늘, n일후, n일전 등)/ date 모듈화)

 

<input type="date" id="date_today"> : 오늘
<input type="date" id="date_-n(D,W,M,Y)"> : -n(일,주,달,년)
<input type="date" id="date_n(D,W,M,Y)"> : +n(일,주,달,년)

 

실제로 사용할 때 이처럼 선언만 해주면 날짜 셋팅되게 만들어보겠습니다.

 

먼저 원하는 위치에

date.js를 만들어줍니다.

 

date.js

$(document).ready(function() {
    // 유동적으로 날짜 설정하는 함수
    function setRelativeDate() {
        $("input[type='date']").each(function() {
            var id = $(this).attr("id");
            var offset = id.replace("date_", "");
            var input = $(this)[0];
            
            if (input) {
                var today = new Date();
                var newDate = new Date(today);

                // 날짜 오프셋 계산
                if (offset.includes("D")) {
                    var days = parseInt(offset.replace("D", ""));
                    newDate.setDate(today.getDate() + days);
                } else if (offset.includes("W")) {
                    var weeks = parseInt(offset.replace("W", ""));
                    newDate.setDate(today.getDate() + (weeks * 7));
                } else if (offset.includes("M")) {
                    var months = parseInt(offset.replace("M", ""));
                    newDate.setMonth(today.getMonth() + months);
                } else if (offset.includes("Y")) {
                    var years = parseInt(offset.replace("Y", ""));
                    newDate.setFullYear(today.getFullYear() + years);
                }

                // 입력 요소에 날짜 설정
                input.value = newDate.toISOString().substring(0, 10);
            } else {
                console.error("ID: '" + id + "' 가 없습니다.");
            }
        });
    }

    // 날짜 설정 호출
    setRelativeDate();
});

 

id 는 id값을 들고옵니다.

offset 은 date_{} 즉, {}값을 들고옵니다.

input 은 선언된 곳의 첫번째 row를 들고옵니다.

 

D, W, M, Y에 따라 값을 계산하여 set을 해줍니다.

 

date_5M이면 오늘날짜 + 5달 형식이 됩니다.

 

이제

test.jsp를 만들고 테스트를 해보겠습니다.

 

test.jsp

<script src="주소/date.js"></script>

<input type="date" id="date_-5D"> ~
<input type="date" id="date_2W">

<input type="date" id="date_today">

 

date.js를 import 시켜주고, input 태그에 id값으로 원하는 날짜를 셋팅해주면 끝이납니다.

 

조회된 날짜를 셋팅해주고 싶을 경우

<input type="date" id="date_변수명">

 

이런식으로 input tag를 선언해주고

 

$(document).ready(function() {
	$.ajax({
		type : 'GET',
		url : "",
		async : true,
		data : {},
		dataType : "json",
		success : function(data) {
			var creationDate = data[0].creationDate;
			var 변수명 = new Date(creationDate);

			if (!isNaN(변수명.getTime())) {
		        var formattedDate = 변수명.toISOString().split('T')[0];
		        $("#변수명").val(formattedDate);
		    } else {
		        console.error("Invalid date: " + creationDate);
		    }

		},
		error : function() {
			console.log("@@@@");
		}
	});
});

 

위 코드처럼 success부분에서 셋팅해주면 되겠습니다. 

 

 

달력 모양을 클릭하면 위 형식의 달력이 나오게 됩니다.