[오늘의집 ] Jquery 달력을 이용한 날짜 검색 구현

---

오늘은 생각보다 어려운, Jquery를 이용하여 날짜를 검색하도록 해보겠다. 왜 Jquery를 이용하는지 모르겠지만, 대부분의 회사에서 달력관련된 것은 Jquery를 사용하고 있다.. 뭐, 대세면 대세를 따라야되지 않을까?

자 바로 시작해보자!

---

MemberMpp.xml

 

 

 

			<when test="shOptionDate == 1">AND a.regDateTime BETWEEN #{shDateStart} AND #{shDateEnd}</when>
			<when test="shOptionDate == 2">AND a.modDateTime BETWEEN #{shDateStart} AND #{shDateEnd}</when>
			<when test="shOptionDate == 3">AND a.ifmmDob BETWEEN #{shDateStart} AND #{shDateEnd}</when>

 

다음 코드는, 검색하기 위한 조건을 만드는 코드이다. 전에 검색에대한 글을 썻던 방식과 비슷하다. 

 

 

ShOptionDate value 값마다 검색되도록 하는 기능을 다르게 부여할것이다..

 

BETWEEN 은 말 그대로 범위내에 있는 값을 검색하도록 하기 위함이다.

 

 

 

MemberList.jsp

 

<link href="/resources/common/jquery/jquery-ui-1.13.1.custom/jquery-ui.css" rel="stylesheet" />

 

이건 Jquery의 위치를 지정해주는 것이다. 본인이 넣은 Jquery폴더를 잘 지정해준다.

 

 

 

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script src="/resources/common/jquery/jquery-ui-1.13.1.custom/jquery-ui.js"></script>

첫번째 순서로 아작스 사용때 사용하는 코드

 

두번째는 Jquery에 대한 사용에 필요한 코드이다. 기본 코드이다. 없으면 작동이 되지 않는다.

 

파일의 내용을 보면 Js, Css로 따르다.

 

 

 	<script type="text/javascript">
	$(document).ready(function(){
		 $("input.shDate").datepicker();
	}); 

	$.datepicker.setDefaults({
	    dateFormat: 'yy-mm-dd',
	    prevText: '이전 달',
	    nextText: '다음 달',
	    monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
	    monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
	    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
	    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
	    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
	    showMonthAfterYear: true,
	    yearSuffix: '년'
	});
</script>

 

 

 

다음코드는 딱 보면 알수 있듯이, 영어로 되어있는 기능을 한국어로 다 치환해주게 해주는 자바스크립트이다.

 

 

 

 

 

	<input class="form-control shDate" type="text" id="shDateStart" name="shDateStart" value="${vo.shDateStart}" placeholder="시작일" autocomplete="off">
			

	<input class="form-control shDate" type="text" id="shDateEnd" name="shDateEnd" value="${vo.shDateEnd}" placeholder="종료일" autocomplete="off">

 

 

 

글씨가 잘 안보일 텐데 class="form-control shDate" 이런식으로 있는데 뒤에 shDate는 무엇을 사용한것이냐면 

 

 

 

 

 

다음과 같이 "input.shDate" 해주면 class 처럼 사용 할 수 있다는걸 지금 처음 알았다.

 

절대 까먹지 말자 유용하다

 

 

 

<select class="form-select" name="shOptionDate">
							<option value="">::날짜::</option>
							<option value="1">등록일</option>
							<option value="2">수정일</option>
							<option>끝날짜</option>
						</select>

 

 

 

 

다음과 같이 shOptionDate를 select 의 name 에 넣어주고

 

Option value="" 를 부여해서 

 

1이 되었을때는 등록일에대한 데이터가 찾아 지도록 하는것이다.

 

 

MemberVo.java

 

 

 

 

Vo에서 사용할 파라미터들을 꼭 넣어주고

 

 

게터 세터 생성 잊지말기 !

 

 

 

 

 

MemberController.java

 

 

	vo.setShOptionDate(vo.getShOptionDate() == null ? 1 : vo.getShOptionDate());
	vo.setShDateStart(vo.getShDateStart() == null ? UtilDateTime.calculateDayString(UtilDateTime.nowLocalDateTime(), Constants.DATE_INTERVAL) : vo.getShDateStart());  	
	vo.setShDateEnd(vo.getShDateEnd() == null ? UtilDateTime.nowString() : vo.getShDateEnd());

 

 

잘 안보일수도 있지만, 다음이 컨트롤러에서 직접적으로 수행하는 명령어이다.

 

ShOptionDate, ShDateStart, ShDateEnd를 각 함수에 맞게 작동되도록 하는것이다.

 

 

 

 

 

UtilDateTime.java

 

package com.todayhouse.project.common.util;

import java.text.SimpleDateFormat;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.Date;


import com.todayhouse.project.common.constants.Constants;

public class UtilDateTime{


			public static LocalDateTime nowLocalDateTime() throws Exception{
				LocalDateTime localDateTime = LocalDateTime.now();
				return localDateTime;
			}
				
			
			public static Date nowDate() throws Exception{
	
				LocalDateTime localDateTime = LocalDateTime.now();
				String localDateTimeString = localDateTime.format(DateTimeFormatter.ofPattern(Constants.DATETIME_FORMAT_BASIC));
				SimpleDateFormat simpleDateFormat = new SimpleDateFormat(Constants.DATETIME_FORMAT_BASIC);
				Date date = simpleDateFormat.parse(localDateTimeString);
				return date;
				
			}

			public static String nowString () throws Exception {
				LocalDateTime localDateTime = LocalDateTime.now();
				String localDateTimeString = localDateTime.format(DateTimeFormatter.ofPattern(Constants.DATE_FORMAT_BASIC));
				return localDateTimeString;
				
			}
			
			
			public static String calculateDayString (LocalDateTime localDateTime, int day) throws Exception {
				LocalDateTime localDateTimeNew;
				
				if(day >= 0) {
						localDateTimeNew = localDateTime.plusDays(Math.abs(day)); 
				} else {
					localDateTimeNew = localDateTime.minusDays(Math.abs(day));
				}

				String localDateTimeNewString = localDateTimeNew.format(DateTimeFormatter.ofPattern(Constants.DATE_FORMAT_BASIC));
				return localDateTimeNewString;
			}
			
			
			public static String addStringTime(String date) {
				return date + "00:00:00";
			}

 

 

 

UtilDateTime은 정말 유용하게 쓸 영역이니 꼭 파일링 해놓자.

 

 

Constants.java

 

 

 

여기는 함수를 사용하는 영역이다.

 

 

그냥 여기다 넣어두고 바로바로 사용하도록 하는것이다.

 

 

 

UtilDateTime.java랑 Constants.java는 죽마고우같은 존재라고 보면 된다.

 

 

이렇게되면

 

 

 

결과값

 

 

이렇게 데이터를 달력을 통해서 넣으면

 

 

 

 

 

다음과 같은 결과 값을 도출해낼수 있는것이다.

 

 

 

 

---

 

 

 

 

To be continue..