jQuery UI 에서 제공하는 DatePicker 사용 예
웹브라우저 화면에서 이용자가 날짜를 입력할 수 있도록 달력 인터페이스를 제공하며 HTML 표준태그를 이용할 수도 있고, Struts2 태그와 함께 사용할 수도 있다. 웹브라우저에서 날짜를 입력하여 서버로 전송하고 서버에서 다시 웹브라우저로 날짜를 전송하는 방법을 알아보고자 한다.
여기서는 2가지 방법(HTML표준+자바표준, Struts 2 태그)으로 예제를 작성하려고 한다
테스트 환경: Windows 7, JDK 1.7, Tomcat 7, Struts 2.3, JSTL 1.2
사용된 JSTL 1.2 라이브러리 다운로드 http://micropilot.tistory.com/category/JSP/JSTL%20setup
jQuery UI 에서 제공하는 datepicker 를 사용하려면 아래의 링크를 참조하면 된다
struts.xml
<action name="dateAction" class="chapter03.DateAction">
<result>chapter03/jquery_datetimepicker.jsp</result>
</action>
HTML 표준태그와 자바표준 태그 (EL, JSTL)를 사용한 예제
datepicker.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="EUC-KR"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI DatePicker Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
});
</script>
<script type="text/javascript">
var msg = "${resultMsg}";
if(msg!='')alert(msg);
</script>
</head>
<body>
<form action="dateAction" method="post">
<p>생일입력: <input id="datepicker" type="text" name="strBirthday" value="${strBirthday}"/></p>
<c:if test="${strBirthday!=null }">
서버로 전송된 날짜<p>
<div style="border:1px solid black; width:400px;">
String형으로 서버에 저장된 상태: ${strBirthday }
<!-- String 형으로 서버에 저장된 날짜를 Date형으로 변환한 후 날짜 패턴을 적용하여 출력하는 예 -->
<fmt:parseDate var="date" value="${strBirthday}" pattern="yyyy-MM-dd"/><p>
String - Date - Pattern :<fmt:formatDate value="${date}" pattern="yyyy.MM.dd"/>
<p>
<!-- 서버에 Date형으로 저장된 날짜에 날짜 패턴을 적용하여 출력한다 -->
Date - Pattern :<fmt:formatDate value="${birthday}" pattern="yyyy/MM/dd"/><p>
</div>
</c:if>
<input type="submit" value="날짜전송"/> <input type="reset" value="취 소"/>
</form>
</body>
</html>
DateAction.java
package chapter03;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import com.opensymphony.xwork2.ActionSupport;
public class DateAction extends ActionSupport {
private String strBirthday; // String 타입으로
private java.util.Date birthday;
private String resultMsg;
@Override
public String execute() throws Exception {
return SUCCESS;
}
public void setStrBirthday(String strDate) {
this.strBirthday = strDate;
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
this.birthday = sdf.parse(strDate);
} catch (ParseException e) {
e.printStackTrace();
}
if(birthday!=null){
resultMsg = "날짜 입력 성공";
}else resultMsg = "날짜 입력 실패";
}
public String getStrBirthday() {
return strBirthday;
}
public java.util.Date getBirthday() {
return birthday;
}
public String getResultMsg() {
return resultMsg;
}
}
Struts 2 에서 제공하는 테그와 함께 사용하는 예제
datepicker.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="EUC-KR"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI DatePicker Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
});
</script>
<script type="text/javascript">
var msg = "<s:property value='resultMsg'/>";
if(msg!='')alert(msg);
</script>
</head>
<body>
<s:form action="dateAction" theme="simple">
<p>생일입력: <s:textfield id="datepicker" name="strBirthday"/></p>
서버로 전송된 날짜: <s:date name="birthday" format="yyyy-MM-dd"/><p>
<s:submit value="날짜전송"/> <s:reset value="취소"/>
</s:form>
</body>
</html>