-
스케줄러 (Spring + MyBatis) - 일정 추가 팝업창 구현취업용 Spring 프로젝트/기능 내역 2019. 7. 23. 23:49
기능 - '일정 추가' 버튼 누르면 팝업창 안에 'schedulePopup.jsp' 페이지 출력
schedule.jsp 의 '일정 추가' 버튼
<button class = "add-button" type = "button" onclick="click_add();">일정 추가</button>schedulePopup.jsp 전체 소스
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>일정 추가</title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <!-- datepicker --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- custom --> <link href="resources/custom/css/schedule.css" rel="stylesheet" /> <script src="resources/custom/js/schedule.js" type="text/javascript"></script> </head> <body> <div class = "group" id = "popupGroup"> <div class = "group-head"> <h1 class = "zTree-h1"> 일정 추가 </h1> </div> <div class = "group-body"> <form id = "scheduleData"> <div class = "top"> <input class = "subject" id = "subject" type = "text" name = "subject" placeholder="제목을 입력해주세요"> </div> <div class = "domain"> <h3 class = "zTree-h3"> 시작 </h3> </div> <div class = "domain"> <input class = "date" id = "startDate" type = "text" name = "startDate" id = "startDate"> </div> <div class = "domain"> <h3 class = "zTree-h3"> 종료 </h3> </div> <div class = "domain"> <input class = "date" id = "endDate" type = "text" name = "endDate" id = "endDate"> </div> <div class = "domain"> <h3 class = "zTree-h3"> 메모 </h3> </div> <div class = "domain"> <textarea class = "memo" id = "memo" name = "memo" rows = "5" cols = "20" placeholder="100글자까지 입력 가능합니다"></textarea> </div> </form> <button class = "ok-button" type= "button" onclick="click_ok();">확인</button> </div> </div> </body> </html>팝업창으로 호출 - schedule.js
option 에서 팝업창 크기 조절
function click_add() { var url = "schedulePopup"; var name = "schedulePopup"; var option = "width = 600, height = 600 left = 100, top=50,location=no"; window.open(url,name,option) };날짜 선택할 datepicker 추가
schedulePopup.jsp에 cdn 추가
<!-- datepicker --> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>schedule.js에 datepicker 추가
datepicker 옵션
- dateFormat - 출력되는 날짜 순서를 yy-mm-dd로 바꿔줌 (default : 'mm/dd/yy')
- showOtherMonths - 다른 달 보여주기
- showMonthAfterYear - true면 년도가 월보다 먼저 표시 (default : '월 년도')
- changeYear, changeMonth - 콤보박스로 년,월 선택
- monthNamesShort,monthNames,dayNamesMin,dayNames - 한글로 표시 (default : 영어)
- $().datepicker('setDate','today') - 초기값을 오늘로 설정
$().datepicker() 를 설정하면 datepicker가 적용됨.
$(function() { $.datepicker.setDefaults({ dateFormat : 'yy-mm-dd', showOtherMonths : true, showMonthAfterYear : true, changeYear : true, changeMonth : true, yearSuffix: "년", monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'], monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], dayNamesMin: ['일','월','화','수','목','금','토'], dayNames: ['일요일','월요일','화요일','수요일','목요일','금요일','토요일'] }); $("#startDate").datepicker(); $("#endDate").datepicker(); $("#startDate").datepicker('setDate', 'today'); $("#endDate").datepicker('setDate', 'today'); });
팝업창
팝업창으로 schedulPopup.jsp 호출 datepicker로 날짜 선택
'취업용 Spring 프로젝트 > 기능 내역' 카테고리의 다른 글
프로젝트 소스 (0) 2020.02.18 스케줄러 (Spring + MyBatis) - 일정 추가 구현 (9) 2019.07.24 스케줄러 (Spring + MyBatis) - fullcalendar로 달력 출력 (0) 2019.07.23 MySQL 5.7 → MariaDB 10.3 마이그레이션(Ubuntu 18.04) (0) 2019.07.18 로그인 기능 구현(Spring + MyBatis + Spring Security) (0) 2019.07.17