daterangepicker에서 startDate, endDate를 받아오는 방법
본문
<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Filter Example</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<button id="addDateFilter">Add Date Filter</button>
<script type="text/javascript">
var dateFilterAdded = false;
function addDateFilter() {
if (!dateFilterAdded) {
var datefilterInput = document.createElement("input");
datefilterInput.type = "text";
datefilterInput.name = "datefilter";
datefilterInput.value = "";
document.body.appendChild(datefilterInput);
$(datefilterInput).daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$(datefilterInput).on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$(datefilterInput).on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
dateFilterAdded = true;
}
}
document.getElementById("addDateFilter").addEventListener("click", addDateFilter);
</script>
</body>
</html>
에서 startDate, endDate의 값을 자바의 VO로 넘겨받을 수 있는 방법이 있으면 좀 알려주세요.
답변 2
JSP 페이지에서 폼을 제출할 때 선택된 startDate와 endDate 값을 서블릿으로 전달해야 합니다
서블릿에서 전달된 startDate와 endDate 값을 받아 VO 객체에 저장하시면 됩니다.
VO 객체를 활용하여 원하는 로직을 구현하시면 될 것 같습니다.
참고하셔서 구현 하고자하는 형식으로 로직을 만드시면 될 것 같습니다.
JSP 페이지 (date-filter.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Filter Example</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
</head>
<body>
<form action="FilterServlet" method="post">
<button type="submit" id="addDateFilter">Add Date Filter</button>
<input type="hidden" name="startDate" id="startDateInput">
<input type="hidden" name="endDate" id="endDateInput">
</form>
<script type="text/javascript">
var dateFilterAdded = false;
function addDateFilter() {
if (!dateFilterAdded) {
var datefilterInput = document.createElement("input");
datefilterInput.type = "text";
datefilterInput.name = "datefilter";
datefilterInput.value = "";
document.body.appendChild(datefilterInput);
$(datefilterInput).daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$(datefilterInput).on('apply.daterangepicker', function(ev, picker) {
$('#startDateInput').val(picker.startDate.format('MM/DD/YYYY'));
$('#endDateInput').val(picker.endDate.format('MM/DD/YYYY'));
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$(datefilterInput).on('cancel.daterangepicker', function(ev, picker) {
$('#startDateInput').val('');
$('#endDateInput').val('');
$(this).val('');
});
dateFilterAdded = true;
}
}
document.getElementById("addDateFilter").addEventListener("click", addDateFilter);
</script>
</body>
</html>
서블릿 (FilterServlet.java)
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/FilterServlet")
public class FilterServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// startDate와 endDate 값을 받아옴
String startDateString = request.getParameter("startDate");
String endDateString = request.getParameter("endDate");
// VO 객체 생성 및 값 설정
Date startDate = null;
Date endDate = null;
SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");
try {
startDate = sdf.parse(startDateString);
endDate = sdf.parse(endDateString);
} catch (ParseException e) {
e.printStackTrace();
}
DateFilterVO vo = new DateFilterVO(startDate, endDate);
// VO 객체 활용하여 로직 수행
// ...
// 예시: VO 객체를 request에 저장하여 JSP 페이지로 전달
request.setAttribute("dateFilterVO", vo);
request.getRequestDispatcher("result.jsp").forward(request, response);
}
}
JSP 페이지에서 startDate와 endDate 값을 폼으로 전송하고, 서블릿(FilterServlet)에서 해당 값을 받아서 VO 객체에 저장한 후 VO 객체를 활용하여 로직을 수행하거나, 필요에 따라 JSP 페이지로 전달 하시면 됩니다.
VO 객체를 DateFilterVO라는 클래스로 가정하고, 해당 클래스는 startDate와 endDate 필드를 가지고 있습니다.
이후 result.jsp 페이지에서 VO 객체를 사용하고자 한다면, request.getAttribute("dateFilterVO")를 사용하여 VO 객체를 가져올 수 있습니다.
post 로 전송하고 받는 페이지에서 map 이나 vo 로 저장해서 출력 시켜주면 되죠 ㅎ
답변을 작성하시기 전에 로그인 해주세요.