[JSTL] datePicker, monthPicker

달력 datepicker / monthpicker

datepicker : 캘린더 형태로 연월일 선택이 가능한 기능

monthpicker : 캘린더 형태로 연월 선택이 가능한 기능

 

$(".datepicker").datepicker({
	changeYear: true,
	changeMonth: true,
	dateFormat: "yy-mm-dd"
});

$('.js-monthpicker').monthpicker({
	altFormat: 'MM y'
});

 

jquery-ui_1.12.1.js

0.51MB

monthpicker.js

0.01MB

 

<tr>
	<th>연월</th>
	<td>
		<div class="date-input-wrap">
			<input type="text"  class="js-monthpicker" id="datasetStartYM" name="datasetStartYM"
				placeholder="시작일" value="${datasetVO.datasetBuildYear }" readonly style="width: 100px"/>
			<label for="datasetStartYM" class="btn-calendar"><img
				src="${staticUrl }/images/icon-calendar.png" alt=""></label>
			~
			<input type="text" class="js-monthpicker" id="datasetEndYM" name="datasetEndYM"
				placeholder="종료일" value="${datasetVO.datasetBuildYear }" readonly style="width: 100px"/>
			<label for="datasetEndYM" class="btn-calendar"><img
				src="${staticUrl }/images/icon-calendar.png" alt=""></label>
		</div>
	</td>
</tr>
<tr>
	<th>연월일</th>
	<td>
		<div class="date-input-wrap">
			<input type="text" class="datepicker" id="datasetStartYMD" name="datasetStartYMD"
				placeholder="종료일" value="${datasetVO.datasetBuildYear }" readonly style="width: 100px"/>
			<label for="datasetStartYMD" class="btn-calendar"><img
				src="${staticUrl }/images/icon-calendar.png" alt=""></label>
			~
			<input type="text" class="datepicker" id="datasetEndYMD" name="datasetEndYMD"
				placeholder="종료일" value="${datasetVO.datasetBuildYear }" readonly style="width: 100px"/>
			<label for="datasetEndYMD" class="btn-calendar"><img
				src="${staticUrl }/images/icon-calendar.png" alt=""></label>
		</div>
	</td>
</tr>

 

monthpicker 출처

https://github.com/tlemens/jquery-ui-monthpicker

GitHub - tlemens/jquery-ui-monthpicker: A jQuery UI monthpicker

 

 

 

redirectAttribute사용

// Redirect URL
@RequestMapping(value = "/refresh/dataVariableMng")
    public String redirectToDataVariableList(RedirectAttributes redirectAttributes, @ModelAttribute("dataVariableListVO") AdminSearchVO pageVO) {
        redirectAttributes.addFlashAttribute("dataVariableListVO", pageVO);

        return "redirect:/amng/dataVariableMng/dataVariableMng.do";
    }

// 사용 URL
    @RequestMapping(value = "/amng/dataVariableMng/dataVariableMng.do")
    public String displayVariableList(@ModelAttribute("dataVariableListVO") AdminSearchVO paramPageVO,
                                      HttpServletRequest request, RedirectAttributes redirectAttributes, Model model, HttpSession session) throws IOException, SQLException {
        AdminSearchVO pageVO = paramPageVO;
        pageVO.setTableKorName(request.getParameter("tableKorName"));
        pageVO.setTableEngName(request.getParameter("tableEngName"));
        Map<String, ?> flashMap = RequestContextUtils.getInputFlashMap(request);
        if (flashMap != null) {
            pageVO = (AdminSearchVO) flashMap.get("dataVariableListVO");
            session.setAttribute("dataVariableListVO", pageVO);
        } else {
            if (session.getAttribute("dataVariableListVO") != null) {
                pageVO = (AdminSearchVO) session.getAttribute("dataVariableListVO");
            }
        }

        pageVO.setStatusType("Y");
        List<CustDataVariableVO> group = adminDataVariableService.selectDataVariableGroupList(pageVO);
        model.addAttribute("group", group);

        int listTotalCnt = adminDataVariableService.selectDataVariableGroupTotalCnt(pageVO);

        pageVO.configurePageVO(pageVO.getNowPage(), Constants.VIEW_ROW, Constants.VIEW_PAGE, listTotalCnt);

        // 카테고리 조회
        List portalUrlList = adminDataVariableService.selectDataVariableGroupList(pageVO);

        model.addAttribute("list", portalUrlList);
        model.addAttribute("dataVariableListVO", pageVO);

        return "/refresh/dataVariableMng";
    }
    
    // tile-definition => jsp연결
    	<definition name="/refresh/*" extends="adminTemplate">
        // name이후에 /*의 첫번째 section을 {1}에 담는다
		<put-attribute name="body" value="/WEB-INF/jsp/amng/dataVariableMng/{1}.jsp"/>
	</definition>