daterangepicker에서 startDate, endDate를 받아오는 방법

daterangepicker에서 startDate, endDate를 받아오는 방법

QA

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 객체를 가져올 수 있습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT