본문 바로가기

안녕하세요!

프로그래밍 언어/JSP

JSP_22-11-17

PythonChoboman 2022. 11. 17. 17:57

[ datepicker.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"	uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"	uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page import="java.util.*" %>
<%@ page import="java.sql.Timestamp" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>

<%
	request.setCharacterEncoding("UTF-8");
	Timestamp nowTime 	= new Timestamp(System.currentTimeMillis());
	int lastYear		= Integer.parseInt(nowTime.toString().substring(0, 4));
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>도시 정보</title>
</head>
<body>

<!-- 상단 메뉴 -->
<jsp:include page="../../common/topMenu.jsp" flush="false"/>

<div class="container">
	<form class="form-horizontal">
		<div class="form-group">
			<div>
				<h2 align="center">도시 정보</h2>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2">출판일자</label>
			<div class="col-sm-2">
				<div class="input-group">
					<select class="form-control" name="publishing_year" style="width:100%" onkeydown="nextFocus(publishing_month)">
						<%for(int i = lastYear; i >= 2001; i--) { %>
							<option value="<%=i%>"><%=i%></option>
						<% } %>
					</select>
					<span class="input-group-addon">년</span>
				</div>
			</div>
			<div class="col-sm-2">
				<div class="input-group">
					<select class="form-control" name="publishing_month" style="width:100%" onkeydown="nextFocus(publishing_day)">
						<c:forEach var="i" begin="1" end="12" step="1">
							<option value="${i}" <c:if test="${i == 5 }">selected</c:if> >${i}</option>
						</c:forEach>
					</select>
					<span class="input-group-addon">월</span>
				</div>
			</div>
			<div class="col-sm-2">
				<div class="input-group">
					<select class="form-control" name="publishing_month" style="width:100%" onkeydown="nextFocus(publishing_day)">
						<c:forEach var="i" begin="1" end="31" step="1">
							<option value="${i}">${i}</option>
						</c:forEach>
					</select>
					<span class="input-group-addon">일</span>
				</div>
			</div>
		</div>
		
	</form>
</div>

<div class="container">
	<form class="horizontal">
		<div class="form-group">
			<div>
				<h2 align="center">구매 일자</h2>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-sm-2">일자</label>
			<div class="col-sm-2">
				<input type="text" class="form-control" id="datepicker1" placeholder="날짜를 선택하십시오."/>
			</div>
		</div>
	</form>
</div>
<div class="container">
   <form class="form-horizontal">
      <div class="form-group">
         <div>
            <h2 align="center">게시글 상세 조회</h2>
         </div>
      </div>

      <div class="form-group">
         <label class="control-label col-sm-2">일자</label>
         <div class="col-sm-2">
            <input type="text" class=" form-control" id="datepicker2" placeholder="날짜를 선택하십시오."/>
         </div>
      </div>
      <div class="form-group">
         <label class="control-label col-sm-2">조회기간을 선택하세요.</label>
         <div class="col-sm-2">
            <input type="text" class=" form-control" id="datepicker3" placeholder="날짜를 선택하십시오."/>
         </div>
         <div class="col-sm-1">
            &nbsp;~&nbsp;
         </div>
         <div class="col-sm-2">
            <input type="text" class=" form-control" id="datepicker4" placeholder="날짜를 선택하십시오."/>
         </div>
      </div>
   </form>
</div>

</body>

<script>
function nextFocus(where) {
	if(event.keyCode == 13) {
		where.focus();
	}
}
</script>

<script>
$(function() {
   
   $("#datepicker1").datepicker();
   
   $("#datepicker2").datepicker({
      // 선택할 수 있는 최대 날짜 +1m +1w은 1달 1주일 뒤까지 선택이 가능하다. [+, -][숫자][y, m, w, d]
      maxDate:   "+1m +1w", 
      minDate:   "-1y"
   });
   
   $("#datepicker3, #datepicker4").datepicker({
      // 옵션들 생략
   });
   
});

$.datepicker.setDefaults({
   showOn:         "both",      // 버튼과 텍스트 필드 모두 캘린더를 보여준다.
   changeYear:      true,      // 년을 바꿀 수 있는 셀렉트 박스를 표시한다.
   changeMonth:   true,      // 월을 바꿀 수 있는 셀렉트 박스를 표시한다.
   showAnim:      "slide",   // 애니메이션을 적용한다.
   dateFormat:      'yy-mm-dd',   // 날짜 포맷.
   prevText:      '이전 달',   // 마우스 오버시 이전달이라는 텍스트 풍선도움말을 보여준다.
   nextText:      '다음 달',   // 마우스 오버시 다음달이라는 텍스트 풍선도움말을 보여준다.
   closeText:      '닫기',      // 닫기 버튼 텍스트 변경
   currentText:   '오늘',      // 
   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,   // true : 년 월   false : 월 일 순으로 보여준다.
   yearSuffix:      '년',
   showButtonPanel:   true   // 오늘로 가는 버튼과 달력 닫기 버튼 보기 옵션
});
</script>





</html>

 

[ address.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c"	uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt"	uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<%	request.setCharacterEncoding("UTF-8"); %>
<% // 다음 주소 검색 API ==> https://postcode.map.daum.net/guide %>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>주소 검색</title>
</head>
<body>

<!-- 상단 메뉴 -->
<jsp:include page="../../common/topMenu.jsp" flush="false"/>


<div class="container">
	<form class="form-horizontal" name="zipForm" method="post">
		<div class="form-group">
			<label class="col-sm-2" style="text-align:right">우편 번호</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" name="zipcode" id="zipcode" readonly/>
				<input type="button" class="form-control" onclick="daumZipCode()" value="우편번호검색" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2" style="text-align:right">주 소</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="address01" name="address01"/>
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-2" style="text-align:right">상세주소</label>
			<div class="col-sm-6">
				<input type="text" class="form-control" id="address02" name="address02" />
			</div>
			
		</div>
	</form>
</div>

<!-- 하단 메뉴 -->
<jsp:include page="../../common/footer.jsp" flush="false"/>

</body>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function daumZipCode() {
	new daum.Postcode({
		oncomplete: function(data) {
			// 팝업창에서 검색한 결과 중 항목을 클릭하였을 경우에 실행할 코드를 이곳에 작성한다.
			// 각 주소의 노출 규칙에 따라서 주소를 조합해야 한다.
			// 내려오는 변수가 값이 없는 경우에는 공백('') 값을 가지므로 이름을 참고하여 분기한다.
			var fullAddr	= '';	// 최종 주소 변수
			var subAddr		= '';	// 조합형 주소 변수
			
			// 사용자가 선택한 주소의 타입에 따라서 해당 주솟값을 가져온다.
			if(data.userSelectedType == 'R') {	// 도로명 주소를 선택한 경우
				fullAddr	= data.reoadAddress;
			} else {	// 지번 주소를 선택한 경우
				fullAddr	= data.jibunAddress;
			}
			// 사용자가 선택한 주소가 도로명 타입일 때 조합한다.
			if(data.userSelectedType == 'R') {
				//법정동명이 있을 경우에 추가한다.
				if(data.bname != '') {
					subAddr += data.bname
				}
				
				if(data.buildingName != '') {
					subAddr += (subAddr != '' ? ', ' + data.buildingName : data.buildingName);
				}
				// 조합형 주소의 유무에 따라 양쪽에 괄호를 추가하여 최종 주소를 만든다.
				fullAddr += (subAddr != '' ? '()' + subAddr + ')' : '');
			}
			
			// 우편번호와 주소정보를 화면의 해당 필드에 출력한다.
			// 5자리의 새 우편번호
			document.getElementById('zipcode').value	= data.zonecode;
			document.getElementById('address01').value	= fullAddr;
				
			// 커서를 상세주소 입력한으로 이동시킨다.
			ducument.getElementById('address02').focus();
			
		}
	}).open({
		// 우편번호 팝업 창이 여러 개 뜨는 것을 방지하기 위해서 popupName을 사용한다.
		popupName:	'postcodePopup'
	});
}


</script>







</html>

 

[ UtilController.java ]

package com.edu.util;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

//-----------------------------------------------------------------------------------------------------------
// public class UtilController
//-----------------------------------------------------------------------------------------------------------
@Controller
@RequestMapping("/util")
public class UtilController {

	
	private static final Logger logger = LoggerFactory.getLogger(UtilController.class);

	//-----------------------------------------------------------------------------------------------------------
	// 주소 검색
	//-----------------------------------------------------------------------------------------------------------
	@RequestMapping(value="/zipcode/address", method=RequestMethod.GET)
	public String address() throws Exception {
		
		logger.info("UtilController 주소 검색 화면 불러오기");
		
		return "/util/zipcode/address";
	} // End - 주소 검색
	
	//-----------------------------------------------------------------------------------------------------------
	// 날짜 검색
	//-----------------------------------------------------------------------------------------------------------
	@RequestMapping(value="/datepicker/datepicker", method=RequestMethod.GET)
	public String datepicker() throws Exception {
		
		logger.info("UtilController 날짜 검색 화면 불러오기");
		
		return "/util/datepicker/datepicker";
	} // End - 날짜 검색
	
	
	
} // End - public class UtilController
728x90
반응형

'프로그래밍 언어 > JSP' 카테고리의 다른 글

JSP_22-11-21_관리자 페이지/상품 등록[1]  (0) 2022.11.21
JSP_22-11-18  (0) 2022.11.18
JSP_22-11-15  (2) 2022.11.15
JSP_22-11-07  (0) 2022.11.15

'프로그래밍 언어/JSP' Related Articles

loading

티스토리툴바