huiwon.seo %!s(int64=4) %!d(string=hai) anos
pai
achega
7256bdb047

+ 83 - 78
src/main/webapp/WEB-INF/jsp/mobile/health/health.jsp

@@ -1,7 +1,60 @@
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
-<%@ page language="java" contentType="text/html; charset=UTF-8"
-    pageEncoding="UTF-8"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
+<style>
+.datepicker-days td.day,
+.datepicker-days th.dow{font-size:17px;}
+.datepicker-days th.dow{padding-top:15px;}
+.datepicker-days th.prev,
+.datepicker-days th.next{font-size:24px;border:1px solid #EAEAEA;}
+.datepicker-days tbody tr td.day:first-child,
+.datepicker-days thead tr th.dow:first-child { color: red;}
+.datepicker-days tbody tr td.day:last-child,
+.datepicker-days thead tr th.dow:last-child { color: blue;}
+.datepicker-days tfoot tr th.today{background:#427BDC;color:#FFFFFF;height:50px;margin-top:20px;}
+.datepicker.dropdown-menu th, .datepicker.datepicker-inline th, .datepicker.dropdown-menu td, .datepicker.datepicker-inline td{padding:5px;border:1px solid #EAEAEA;}
+.datepicker .datepicker-switch{height:60px;font-size:20px;border:1px solid #EAEAEA;}
+.table-condensed{width:350px;}
+</style>
+<script type="text/javascript">
+$( function(){
+	$('#input.timePicker').datetimepicker({
+        datepicker: { showOtherMonths: true },
+        modal: true,
+        footer: true
+    });
+	
+    $('input.datePicker').datepicker({
+    	setDate: new Date(),
+        format: "yyyy-mm-dd",   //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
+        //startDate: '-10d',  //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
+        //endDate: '+10d',    //달력에서 선택 할 수 있는 가장 느린 날짜. 이후로 선택 불가 ( d : 일 m : 달 y : 년 w : 주)
+        autoclose : true,   //사용자가 날짜를 클릭하면 자동 캘린더가 닫히는 옵션
+        calendarWeeks : false, //캘린더 옆에 몇 주차인지 보여주는 옵션 기본값 false 보여주려면 true
+        //clearBtn : true, //날짜 선택한 값 초기화 해주는 버튼 보여주는 옵션 기본값 false 보여주려면 true
+       // datesDisabled : ['2019-06-24','2019-06-26'],//선택 불가능한 일 설정 하는 배열 위에 있는 format 과 형식이 같아야함.
+        //daysOfWeekDisabled : [0,6], //선택 불가능한 요일 설정 0 : 일요일 ~ 6 : 토요일
+        //daysOfWeekHighlighted : [0, 6], //강조 되어야 하는 요일 설정
+        disableTouchKeyboard : false,   //모바일에서 플러그인 작동 여부 기본값 false 가 작동 true가 작동 안함.
+        immediateUpdates: false,    //사용자가 보는 화면으로 바로바로 날짜를 변경할지 여부 기본값 :false 
+        multidate : false, //여러 날짜 선택할 수 있게 하는 옵션 기본값 :false 
+        multidateSeparator :",", //여러 날짜를 선택했을 때 사이에 나타나는 글짜 2019-05-01,2019-06-01
+        templates : {
+            leftArrow: '&laquo;',
+            rightArrow: '&raquo;'
+        }, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징 
+        showWeekDays : true ,// 위에 요일 보여주는 옵션 기본값 : true
+        //title: "날짜를 선택해주세요",   //캘린더 상단에 보여주는 타이틀
+        todayHighlight : true , //오늘 날짜에 하이라이팅 기능 기본값 :false 
+        //toggleActive : true,    //이미 선택된 날짜 선택하면 기본값 : false인경우 그대로 유지 true인 경우 날짜 삭제
+        weekStart : 0 ,//달력 시작 요일 선택하는 것 기본값은 0인 일요일 
+        language : "ko", //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
+        todayBtn:'linked'
+    });
+});
+</script>
+
 </head>
 <body>
     <div id="sub">
@@ -44,75 +97,31 @@
                 </ul>
             </div>
             <div class="health">
-                <div class="popup" data-popup="popup-calendar">
-                    <div class="pop_inner">
-                        <div class="month">
-                          <ul>
-                            <li class="prev"><a href="javascript:;">&#10094;</a></li>
-                            <li class="next"><a href="javascript:;">&#10095;</a></li>
-                            <li><span>2019년 11월</span>11월 20일 일요일</li>
-                          </ul>
-                        </div>
-
-                        <ul class="weekdays">
-                          <li>월</li>
-                          <li>화</li>
-                          <li>수</li>
-                          <li>목</li>
-                          <li>금</li>
-                          <li>토</li>
-                          <li>일</li>
-                        </ul>
-
-                        <ul class="days">
-                          <li><span></span></li>
-                          <li><span>1</span></li>
-                          <li><span>2</span></li>
-                          <li><span>3</span></li>
-                          <li><span>4</span></li>
-                          <li><span>5</span></li>
-                          <li><span>6</span></li>
-                          <li><span>7</span></li>
-                          <li><span>8</span></li>
-                          <li><span>9</span></li>
-                          <li><span>10</span></li>
-                          <li><span>11</span></li>
-                          <li><span>12</span></li>
-                          <li><span>13</span></li>
-                          <li><span>14</span></li>
-                          <li><span>15</span></li>
-                          <li><span>16</span></li>
-                          <li><span>17</span></li>
-                          <li><span>18</span></li>
-                          <li><span>19</span></li>
-                          <li><span class="active">20</span></li>
-                          <li><span>21</span></li>
-                          <li><span>22</span></li>
-                          <li><span>23</span></li>
-                          <li><span>24</span></li>
-                          <li><span>25</span></li>
-                          <li><span>26</span></li>
-                          <li><span>27</span></li>
-                          <li><span>28</span></li>
-                          <li><span>29</span></li>
-                          <li><span>30</span></li>
-                        </ul>
-                        <div class="btn">
-                            <ul>
-                                <li>
-                                    <a href="javascript:;" class="cancle" data-popup-close="popup-calendar">취소</a>
-                                </li>
-                                <li>
-                                    <a href="javascript:;" class="confirm">확인</a>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
                 <div class="popup" data-popup="popup-time">
                     <div class="pop_inner">
                         <div class="time">
-                            sdf
+                            <label class="apm">
+                                <select>
+                                    <option>오전</option>
+                                    <option>오후</option>
+                                </select>
+                            </label>
+                            <label class="hour">
+                                <select>
+                                    <c:forEach var="h" begin="1" end="12" step="1">
+                                        <fmt:formatNumber var="hour" minIntegerDigits="2" value="${h}" type="number"/>
+                                        <option value="${hour}">${hour} 시</option>
+                                    </c:forEach>
+                                </select>
+                            </label>
+                            <label class="minitues">
+                                <select>
+                                    <c:forEach var="m" begin="0" end="59" step="1">
+                                        <fmt:formatNumber var="min" minIntegerDigits="2" value="${m}" type="number"/>
+                                        <option value="${min}">${min} 분</option>
+                                    </c:forEach>
+                                </select>
+                            </label>
                         </div>
                         <div class="btn">
                             <ul>
@@ -127,21 +136,17 @@
                     </div>
                 </div>
                 <div class="part">
-                    <div class="title">
-                        날짜
-                    </div>
+                    <div class="title">날짜</div>
                     <div class="input day">
-                        <a href="javascript:;" data-popup-open="popup-calendar">d</a>
-                        <input type="text" name="" placeholder="2020.09.08">
+<!--                         <a href="javascript:;" data-popup-open="popup-calendar">d</a> -->
+                        <input type="text" class="datePicker form-control" name="" value="" placeholder="">
                     </div>
                 </div>
                 <div class="part">
-                    <div class="title">
-                        측정시간
-                    </div>
+                    <div class="title">측정시간</div>
                     <div class="input time">
-                        <a href="javascript:;" data-popup-open="popup-time">d</a>
-                        <input type="text" name="" placeholder="오전 09:09">
+<!--                         <a href="javascript:;" data-popup-open="popup-time">d</a> -->
+                        <input type="text" class="timePicker" name="" placeholder="오전 09:09">
                     </div>
                 </div>
                 <div class="data unlink">

+ 9 - 3
src/main/webapp/WEB-INF/jsp/mobile/include/header.jsp

@@ -9,8 +9,14 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <title><c:out value="${data._TITLE}"/></title>
-<link rel="stylesheet" type="text/css" href="/resources/css/mobile/style.css" />
+<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > -->
+<!-- <link rel="stylesheet" type="text/css" href="/resources/css/mobile/bootstrap-datepicker.css" /> -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-<!-- <script type="text/javascript" src="/resources/js/mobile/jquery-1.12.4.min.js"></script> -->
+<link rel="stylesheet" type="text/css" href="/resources/css/mobile/style.css" />
+<link rel="stylesheet" type="text/css" href="/resources/css/mobile/bootstrap-datepicker3.standalone.css" />
+
+<script type="text/javascript" src="/resources/js/mobile/jquery-3.3.1.min.js"></script>
 <script type="text/javascript" src="/resources/js/mobile/app.js"></script>
-<script type="text/javascript" src="/resources/js/mobile/common.js"></script>
+<script type="text/javascript" src="/resources/js/mobile/bootstrap-datepicker.min.js"></script>
+<script type="text/javascript" src="/resources/js/mobile/bootstrap-datepicker.ko.min.js"></script>
+<script type="text/javascript" src="/resources/js/mobile/common.js"></script>

+ 1 - 0
src/main/webapp/WEB-INF/jsp/mobile/menu/menu.jsp

@@ -19,6 +19,7 @@ function alreadyMunjin() {
                             <span></span>
                             <span></span>
                             <span></span>
+                            <span></span>
                         </a>
                     </div>
                     <div class="name">

+ 712 - 0
src/main/webapp/resources/css/mobile/bootstrap-datepicker3.standalone.css

@@ -0,0 +1,712 @@
+/*!
+ * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
+ *
+ * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
+ */
+
+.datepicker {
+  border-radius: 4px;
+  direction: ltr;
+}
+.datepicker-inline {
+  width: 220px;
+}
+.datepicker-rtl {
+  direction: rtl;
+}
+.datepicker-rtl.dropdown-menu {
+  left: auto;
+}
+.datepicker-rtl table tr td span {
+  float: right;
+}
+.datepicker-dropdown {
+  top: 0;
+  left: 0;
+  padding: 4px;
+}
+.datepicker-dropdown:before {
+  content: '';
+  display: inline-block;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid rgba(0, 0, 0, 0.15);
+  border-top: 0;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  position: absolute;
+}
+.datepicker-dropdown:after {
+  content: '';
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-top: 0;
+  position: absolute;
+}
+.datepicker-dropdown.datepicker-orient-left:before {
+  left: 6px;
+}
+.datepicker-dropdown.datepicker-orient-left:after {
+  left: 7px;
+}
+.datepicker-dropdown.datepicker-orient-right:before {
+  right: 6px;
+}
+.datepicker-dropdown.datepicker-orient-right:after {
+  right: 7px;
+}
+.datepicker-dropdown.datepicker-orient-bottom:before {
+  top: -7px;
+}
+.datepicker-dropdown.datepicker-orient-bottom:after {
+  top: -6px;
+}
+.datepicker-dropdown.datepicker-orient-top:before {
+  bottom: -7px;
+  border-bottom: 0;
+  border-top: 7px solid rgba(0, 0, 0, 0.15);
+}
+.datepicker-dropdown.datepicker-orient-top:after {
+  bottom: -6px;
+  border-bottom: 0;
+  border-top: 6px solid #fff;
+}
+.datepicker table {
+  margin: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.datepicker table tr td,
+.datepicker table tr th {
+  text-align: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 4px;
+  border: none;
+}
+.table-striped .datepicker table tr td,
+.table-striped .datepicker table tr th {
+  background-color: transparent;
+}
+.datepicker table tr td.old,
+.datepicker table tr td.new {
+  color: #777777;
+}
+.datepicker table tr td.day:hover,
+.datepicker table tr td.focused {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.datepicker table tr td.disabled,
+.datepicker table tr td.disabled:hover {
+  background: none;
+  color: #777777;
+  cursor: default;
+}
+.datepicker table tr td.highlighted {
+  color: #000;
+  background-color: #d9edf7;
+  border-color: #85c5e5;
+  border-radius: 0;
+}
+.datepicker table tr td.highlighted:focus,
+.datepicker table tr td.highlighted.focus {
+  color: #000;
+  background-color: #afd9ee;
+  border-color: #298fc2;
+}
+.datepicker table tr td.highlighted:hover {
+  color: #000;
+  background-color: #afd9ee;
+  border-color: #52addb;
+}
+.datepicker table tr td.highlighted:active,
+.datepicker table tr td.highlighted.active {
+  color: #000;
+  background-color: #afd9ee;
+  border-color: #52addb;
+}
+.datepicker table tr td.highlighted:active:hover,
+.datepicker table tr td.highlighted.active:hover,
+.datepicker table tr td.highlighted:active:focus,
+.datepicker table tr td.highlighted.active:focus,
+.datepicker table tr td.highlighted:active.focus,
+.datepicker table tr td.highlighted.active.focus {
+  color: #000;
+  background-color: #91cbe8;
+  border-color: #298fc2;
+}
+.datepicker table tr td.highlighted.disabled:hover,
+.datepicker table tr td.highlighted[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.highlighted:hover,
+.datepicker table tr td.highlighted.disabled:focus,
+.datepicker table tr td.highlighted[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.highlighted:focus,
+.datepicker table tr td.highlighted.disabled.focus,
+.datepicker table tr td.highlighted[disabled].focus,
+fieldset[disabled] .datepicker table tr td.highlighted.focus {
+  background-color: #d9edf7;
+  border-color: #85c5e5;
+}
+.datepicker table tr td.highlighted.focused {
+  background: #afd9ee;
+}
+.datepicker table tr td.highlighted.disabled,
+.datepicker table tr td.highlighted.disabled:active {
+  background: #d9edf7;
+  color: #777777;
+}
+.datepicker table tr td.today {
+  color: #000;
+  background-color: #ffdb99;
+  border-color: #ffb733;
+}
+.datepicker table tr td.today:focus,
+.datepicker table tr td.today.focus {
+  color: #000;
+  background-color: #ffc966;
+  border-color: #b37400;
+}
+.datepicker table tr td.today:hover {
+  color: #000;
+  background-color: #ffc966;
+  border-color: #f59e00;
+}
+.datepicker table tr td.today:active,
+.datepicker table tr td.today.active {
+  color: #000;
+  background-color: #ffc966;
+  border-color: #f59e00;
+}
+.datepicker table tr td.today:active:hover,
+.datepicker table tr td.today.active:hover,
+.datepicker table tr td.today:active:focus,
+.datepicker table tr td.today.active:focus,
+.datepicker table tr td.today:active.focus,
+.datepicker table tr td.today.active.focus {
+  color: #000;
+  background-color: #ffbc42;
+  border-color: #b37400;
+}
+.datepicker table tr td.today.disabled:hover,
+.datepicker table tr td.today[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.today:hover,
+.datepicker table tr td.today.disabled:focus,
+.datepicker table tr td.today[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.today:focus,
+.datepicker table tr td.today.disabled.focus,
+.datepicker table tr td.today[disabled].focus,
+fieldset[disabled] .datepicker table tr td.today.focus {
+  background-color: #ffdb99;
+  border-color: #ffb733;
+}
+.datepicker table tr td.today.focused {
+  background: #ffc966;
+}
+.datepicker table tr td.today.disabled,
+.datepicker table tr td.today.disabled:active {
+  background: #ffdb99;
+  color: #777777;
+}
+.datepicker table tr td.range {
+  color: #000;
+  background-color: #eeeeee;
+  border-color: #bbbbbb;
+  border-radius: 0;
+}
+.datepicker table tr td.range:focus,
+.datepicker table tr td.range.focus {
+  color: #000;
+  background-color: #d5d5d5;
+  border-color: #7c7c7c;
+}
+.datepicker table tr td.range:hover {
+  color: #000;
+  background-color: #d5d5d5;
+  border-color: #9d9d9d;
+}
+.datepicker table tr td.range:active,
+.datepicker table tr td.range.active {
+  color: #000;
+  background-color: #d5d5d5;
+  border-color: #9d9d9d;
+}
+.datepicker table tr td.range:active:hover,
+.datepicker table tr td.range.active:hover,
+.datepicker table tr td.range:active:focus,
+.datepicker table tr td.range.active:focus,
+.datepicker table tr td.range:active.focus,
+.datepicker table tr td.range.active.focus {
+  color: #000;
+  background-color: #c3c3c3;
+  border-color: #7c7c7c;
+}
+.datepicker table tr td.range.disabled:hover,
+.datepicker table tr td.range[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.range:hover,
+.datepicker table tr td.range.disabled:focus,
+.datepicker table tr td.range[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.range:focus,
+.datepicker table tr td.range.disabled.focus,
+.datepicker table tr td.range[disabled].focus,
+fieldset[disabled] .datepicker table tr td.range.focus {
+  background-color: #eeeeee;
+  border-color: #bbbbbb;
+}
+.datepicker table tr td.range.focused {
+  background: #d5d5d5;
+}
+.datepicker table tr td.range.disabled,
+.datepicker table tr td.range.disabled:active {
+  background: #eeeeee;
+  color: #777777;
+}
+.datepicker table tr td.range.highlighted {
+  color: #000;
+  background-color: #e4eef3;
+  border-color: #9dc1d3;
+}
+.datepicker table tr td.range.highlighted:focus,
+.datepicker table tr td.range.highlighted.focus {
+  color: #000;
+  background-color: #c1d7e3;
+  border-color: #4b88a6;
+}
+.datepicker table tr td.range.highlighted:hover {
+  color: #000;
+  background-color: #c1d7e3;
+  border-color: #73a6c0;
+}
+.datepicker table tr td.range.highlighted:active,
+.datepicker table tr td.range.highlighted.active {
+  color: #000;
+  background-color: #c1d7e3;
+  border-color: #73a6c0;
+}
+.datepicker table tr td.range.highlighted:active:hover,
+.datepicker table tr td.range.highlighted.active:hover,
+.datepicker table tr td.range.highlighted:active:focus,
+.datepicker table tr td.range.highlighted.active:focus,
+.datepicker table tr td.range.highlighted:active.focus,
+.datepicker table tr td.range.highlighted.active.focus {
+  color: #000;
+  background-color: #a8c8d8;
+  border-color: #4b88a6;
+}
+.datepicker table tr td.range.highlighted.disabled:hover,
+.datepicker table tr td.range.highlighted[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.range.highlighted:hover,
+.datepicker table tr td.range.highlighted.disabled:focus,
+.datepicker table tr td.range.highlighted[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.range.highlighted:focus,
+.datepicker table tr td.range.highlighted.disabled.focus,
+.datepicker table tr td.range.highlighted[disabled].focus,
+fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
+  background-color: #e4eef3;
+  border-color: #9dc1d3;
+}
+.datepicker table tr td.range.highlighted.focused {
+  background: #c1d7e3;
+}
+.datepicker table tr td.range.highlighted.disabled,
+.datepicker table tr td.range.highlighted.disabled:active {
+  background: #e4eef3;
+  color: #777777;
+}
+.datepicker table tr td.range.today {
+  color: #000;
+  background-color: #f7ca77;
+  border-color: #f1a417;
+}
+.datepicker table tr td.range.today:focus,
+.datepicker table tr td.range.today.focus {
+  color: #000;
+  background-color: #f4b747;
+  border-color: #815608;
+}
+.datepicker table tr td.range.today:hover {
+  color: #000;
+  background-color: #f4b747;
+  border-color: #bf800c;
+}
+.datepicker table tr td.range.today:active,
+.datepicker table tr td.range.today.active {
+  color: #000;
+  background-color: #f4b747;
+  border-color: #bf800c;
+}
+.datepicker table tr td.range.today:active:hover,
+.datepicker table tr td.range.today.active:hover,
+.datepicker table tr td.range.today:active:focus,
+.datepicker table tr td.range.today.active:focus,
+.datepicker table tr td.range.today:active.focus,
+.datepicker table tr td.range.today.active.focus {
+  color: #000;
+  background-color: #f2aa25;
+  border-color: #815608;
+}
+.datepicker table tr td.range.today.disabled:hover,
+.datepicker table tr td.range.today[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.range.today:hover,
+.datepicker table tr td.range.today.disabled:focus,
+.datepicker table tr td.range.today[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.range.today:focus,
+.datepicker table tr td.range.today.disabled.focus,
+.datepicker table tr td.range.today[disabled].focus,
+fieldset[disabled] .datepicker table tr td.range.today.focus {
+  background-color: #f7ca77;
+  border-color: #f1a417;
+}
+.datepicker table tr td.range.today.disabled,
+.datepicker table tr td.range.today.disabled:active {
+  background: #f7ca77;
+  color: #777777;
+}
+.datepicker table tr td.selected,
+.datepicker table tr td.selected.highlighted {
+  color: #fff;
+  background-color: #777777;
+  border-color: #555555;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.selected:focus,
+.datepicker table tr td.selected.highlighted:focus,
+.datepicker table tr td.selected.focus,
+.datepicker table tr td.selected.highlighted.focus {
+  color: #fff;
+  background-color: #5e5e5e;
+  border-color: #161616;
+}
+.datepicker table tr td.selected:hover,
+.datepicker table tr td.selected.highlighted:hover {
+  color: #fff;
+  background-color: #5e5e5e;
+  border-color: #373737;
+}
+.datepicker table tr td.selected:active,
+.datepicker table tr td.selected.highlighted:active,
+.datepicker table tr td.selected.active,
+.datepicker table tr td.selected.highlighted.active {
+  color: #fff;
+  background-color: #5e5e5e;
+  border-color: #373737;
+}
+.datepicker table tr td.selected:active:hover,
+.datepicker table tr td.selected.highlighted:active:hover,
+.datepicker table tr td.selected.active:hover,
+.datepicker table tr td.selected.highlighted.active:hover,
+.datepicker table tr td.selected:active:focus,
+.datepicker table tr td.selected.highlighted:active:focus,
+.datepicker table tr td.selected.active:focus,
+.datepicker table tr td.selected.highlighted.active:focus,
+.datepicker table tr td.selected:active.focus,
+.datepicker table tr td.selected.highlighted:active.focus,
+.datepicker table tr td.selected.active.focus,
+.datepicker table tr td.selected.highlighted.active.focus {
+  color: #fff;
+  background-color: #4c4c4c;
+  border-color: #161616;
+}
+.datepicker table tr td.selected.disabled:hover,
+.datepicker table tr td.selected.highlighted.disabled:hover,
+.datepicker table tr td.selected[disabled]:hover,
+.datepicker table tr td.selected.highlighted[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.selected:hover,
+fieldset[disabled] .datepicker table tr td.selected.highlighted:hover,
+.datepicker table tr td.selected.disabled:focus,
+.datepicker table tr td.selected.highlighted.disabled:focus,
+.datepicker table tr td.selected[disabled]:focus,
+.datepicker table tr td.selected.highlighted[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.selected:focus,
+fieldset[disabled] .datepicker table tr td.selected.highlighted:focus,
+.datepicker table tr td.selected.disabled.focus,
+.datepicker table tr td.selected.highlighted.disabled.focus,
+.datepicker table tr td.selected[disabled].focus,
+.datepicker table tr td.selected.highlighted[disabled].focus,
+fieldset[disabled] .datepicker table tr td.selected.focus,
+fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
+  background-color: #777777;
+  border-color: #555555;
+}
+.datepicker table tr td.active,
+.datepicker table tr td.active.highlighted {
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td.active:focus,
+.datepicker table tr td.active.highlighted:focus,
+.datepicker table tr td.active.focus,
+.datepicker table tr td.active.highlighted.focus {
+  color: #fff;
+  background-color: #286090;
+  border-color: #122b40;
+}
+.datepicker table tr td.active:hover,
+.datepicker table tr td.active.highlighted:hover {
+  color: #fff;
+  background-color: #286090;
+  border-color: #204d74;
+}
+.datepicker table tr td.active:active,
+.datepicker table tr td.active.highlighted:active,
+.datepicker table tr td.active.active,
+.datepicker table tr td.active.highlighted.active {
+  color: #fff;
+  background-color: #286090;
+  border-color: #204d74;
+}
+.datepicker table tr td.active:active:hover,
+.datepicker table tr td.active.highlighted:active:hover,
+.datepicker table tr td.active.active:hover,
+.datepicker table tr td.active.highlighted.active:hover,
+.datepicker table tr td.active:active:focus,
+.datepicker table tr td.active.highlighted:active:focus,
+.datepicker table tr td.active.active:focus,
+.datepicker table tr td.active.highlighted.active:focus,
+.datepicker table tr td.active:active.focus,
+.datepicker table tr td.active.highlighted:active.focus,
+.datepicker table tr td.active.active.focus,
+.datepicker table tr td.active.highlighted.active.focus {
+  color: #fff;
+  background-color: #204d74;
+  border-color: #122b40;
+}
+.datepicker table tr td.active.disabled:hover,
+.datepicker table tr td.active.highlighted.disabled:hover,
+.datepicker table tr td.active[disabled]:hover,
+.datepicker table tr td.active.highlighted[disabled]:hover,
+fieldset[disabled] .datepicker table tr td.active:hover,
+fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
+.datepicker table tr td.active.disabled:focus,
+.datepicker table tr td.active.highlighted.disabled:focus,
+.datepicker table tr td.active[disabled]:focus,
+.datepicker table tr td.active.highlighted[disabled]:focus,
+fieldset[disabled] .datepicker table tr td.active:focus,
+fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
+.datepicker table tr td.active.disabled.focus,
+.datepicker table tr td.active.highlighted.disabled.focus,
+.datepicker table tr td.active[disabled].focus,
+.datepicker table tr td.active.highlighted[disabled].focus,
+fieldset[disabled] .datepicker table tr td.active.focus,
+fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+.datepicker table tr td span {
+  display: block;
+  width: 23%;
+  height: 54px;
+  line-height: 54px;
+  float: left;
+  margin: 1%;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.datepicker table tr td span:hover,
+.datepicker table tr td span.focused {
+  background: #eeeeee;
+}
+.datepicker table tr td span.disabled,
+.datepicker table tr td span.disabled:hover {
+  background: none;
+  color: #777777;
+  cursor: default;
+}
+.datepicker table tr td span.active,
+.datepicker table tr td span.active:hover,
+.datepicker table tr td span.active.disabled,
+.datepicker table tr td span.active.disabled:hover {
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.datepicker table tr td span.active:focus,
+.datepicker table tr td span.active:hover:focus,
+.datepicker table tr td span.active.disabled:focus,
+.datepicker table tr td span.active.disabled:hover:focus,
+.datepicker table tr td span.active.focus,
+.datepicker table tr td span.active:hover.focus,
+.datepicker table tr td span.active.disabled.focus,
+.datepicker table tr td span.active.disabled:hover.focus {
+  color: #fff;
+  background-color: #286090;
+  border-color: #122b40;
+}
+.datepicker table tr td span.active:hover,
+.datepicker table tr td span.active:hover:hover,
+.datepicker table tr td span.active.disabled:hover,
+.datepicker table tr td span.active.disabled:hover:hover {
+  color: #fff;
+  background-color: #286090;
+  border-color: #204d74;
+}
+.datepicker table tr td span.active:active,
+.datepicker table tr td span.active:hover:active,
+.datepicker table tr td span.active.disabled:active,
+.datepicker table tr td span.active.disabled:hover:active,
+.datepicker table tr td span.active.active,
+.datepicker table tr td span.active:hover.active,
+.datepicker table tr td span.active.disabled.active,
+.datepicker table tr td span.active.disabled:hover.active {
+  color: #fff;
+  background-color: #286090;
+  border-color: #204d74;
+}
+.datepicker table tr td span.active:active:hover,
+.datepicker table tr td span.active:hover:active:hover,
+.datepicker table tr td span.active.disabled:active:hover,
+.datepicker table tr td span.active.disabled:hover:active:hover,
+.datepicker table tr td span.active.active:hover,
+.datepicker table tr td span.active:hover.active:hover,
+.datepicker table tr td span.active.disabled.active:hover,
+.datepicker table tr td span.active.disabled:hover.active:hover,
+.datepicker table tr td span.active:active:focus,
+.datepicker table tr td span.active:hover:active:focus,
+.datepicker table tr td span.active.disabled:active:focus,
+.datepicker table tr td span.active.disabled:hover:active:focus,
+.datepicker table tr td span.active.active:focus,
+.datepicker table tr td span.active:hover.active:focus,
+.datepicker table tr td span.active.disabled.active:focus,
+.datepicker table tr td span.active.disabled:hover.active:focus,
+.datepicker table tr td span.active:active.focus,
+.datepicker table tr td span.active:hover:active.focus,
+.datepicker table tr td span.active.disabled:active.focus,
+.datepicker table tr td span.active.disabled:hover:active.focus,
+.datepicker table tr td span.active.active.focus,
+.datepicker table tr td span.active:hover.active.focus,
+.datepicker table tr td span.active.disabled.active.focus,
+.datepicker table tr td span.active.disabled:hover.active.focus {
+  color: #fff;
+  background-color: #204d74;
+  border-color: #122b40;
+}
+.datepicker table tr td span.active.disabled:hover,
+.datepicker table tr td span.active:hover.disabled:hover,
+.datepicker table tr td span.active.disabled.disabled:hover,
+.datepicker table tr td span.active.disabled:hover.disabled:hover,
+.datepicker table tr td span.active[disabled]:hover,
+.datepicker table tr td span.active:hover[disabled]:hover,
+.datepicker table tr td span.active.disabled[disabled]:hover,
+.datepicker table tr td span.active.disabled:hover[disabled]:hover,
+fieldset[disabled] .datepicker table tr td span.active:hover,
+fieldset[disabled] .datepicker table tr td span.active:hover:hover,
+fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
+fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
+.datepicker table tr td span.active.disabled:focus,
+.datepicker table tr td span.active:hover.disabled:focus,
+.datepicker table tr td span.active.disabled.disabled:focus,
+.datepicker table tr td span.active.disabled:hover.disabled:focus,
+.datepicker table tr td span.active[disabled]:focus,
+.datepicker table tr td span.active:hover[disabled]:focus,
+.datepicker table tr td span.active.disabled[disabled]:focus,
+.datepicker table tr td span.active.disabled:hover[disabled]:focus,
+fieldset[disabled] .datepicker table tr td span.active:focus,
+fieldset[disabled] .datepicker table tr td span.active:hover:focus,
+fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
+fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
+.datepicker table tr td span.active.disabled.focus,
+.datepicker table tr td span.active:hover.disabled.focus,
+.datepicker table tr td span.active.disabled.disabled.focus,
+.datepicker table tr td span.active.disabled:hover.disabled.focus,
+.datepicker table tr td span.active[disabled].focus,
+.datepicker table tr td span.active:hover[disabled].focus,
+.datepicker table tr td span.active.disabled[disabled].focus,
+.datepicker table tr td span.active.disabled:hover[disabled].focus,
+fieldset[disabled] .datepicker table tr td span.active.focus,
+fieldset[disabled] .datepicker table tr td span.active:hover.focus,
+fieldset[disabled] .datepicker table tr td span.active.disabled.focus,
+fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+.datepicker table tr td span.old,
+.datepicker table tr td span.new {
+  color: #777777;
+}
+.datepicker .datepicker-switch {
+  width: 145px;
+}
+.datepicker .datepicker-switch,
+.datepicker .prev,
+.datepicker .next,
+.datepicker tfoot tr th {
+  cursor: pointer;
+}
+.datepicker .datepicker-switch:hover,
+.datepicker .prev:hover,
+.datepicker .next:hover,
+.datepicker tfoot tr th:hover {
+  background: #eeeeee;
+}
+.datepicker .prev.disabled,
+.datepicker .next.disabled {
+  visibility: hidden;
+}
+.datepicker .cw {
+  font-size: 10px;
+  width: 12px;
+  padding: 0 2px 0 5px;
+  vertical-align: middle;
+}
+.input-group.date .input-group-addon {
+  cursor: pointer;
+}
+.input-daterange {
+  width: 100%;
+}
+.input-daterange input {
+  text-align: center;
+}
+.input-daterange input:first-child {
+  border-radius: 3px 0 0 3px;
+}
+.input-daterange input:last-child {
+  border-radius: 0 3px 3px 0;
+}
+.input-daterange .input-group-addon {
+  width: auto;
+  min-width: 16px;
+  padding: 4px 5px;
+  line-height: 1.42857143;
+  border-width: 1px 0;
+  margin-left: -5px;
+  margin-right: -5px;
+}
+.datepicker.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 160px;
+  list-style: none;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  -webkit-background-clip: padding-box;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  color: #333333;
+  font-size: 13px;
+  line-height: 1.42857143;
+}
+.datepicker.dropdown-menu th,
+.datepicker.datepicker-inline th,
+.datepicker.dropdown-menu td,
+.datepicker.datepicker-inline td {
+  padding: 0px 5px;
+}
+/*# sourceMappingURL=bootstrap-datepicker3.standalone.css.map */

+ 16 - 4
src/main/webapp/resources/css/mobile/style.css

@@ -52,9 +52,9 @@ ol, ul {list-style:none;}
 address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;}
 
 /* 테이블 스타일 초기화 */
-table {border-collapse:collapse;border:0;border-spacing:0;table-layout:fixed;width:100%;}
-table th{word-wrap:break-word}
-table td{word-wrap:break-word}
+/* table {border-collapse:collapse;border:0;border-spacing:0;table-layout:fixed;width:100%;} */
+/* table th{word-wrap:break-word} */
+/* table td{word-wrap:break-word} */
 
 /* 이미지 및 필드셋에서 보더 표시 초기화 */
 fieldset, img {border:0;}
@@ -128,7 +128,9 @@ caption {text-align:left;}
 #main .quick_menu li img { width: 55%; }
 #main .user_guide {  background-color: #F6F6F6; text-align: center;}
 #main .user_guide a { display: block; font-size: 16px; line-height: 80px;  }
-#main .user_guide a .icon { display: inline-block; background-image: url('../../images/mobile/man_bg.png'); margin-right: 10px; }
+#main .user_guide a .icon { display: inline-block; 
+/* background-image: url('../../images/mobile/man_bg.png'); */
+ margin-right: 10px; }
 #main .user_guide a .icon img { width: 40px; }
 
 
@@ -157,6 +159,13 @@ input[type="radio"]:checked + label span {  background-image:url('../../images/m
 .btn_group li a.confirm { background-color: #427BDC; color:#FFFFFF; font-weight: 700; }
 .btn_group li a.confirm span.check { background-repeat: no-repeat; background-image: url(../../images/mobile/btn_check_icon.png); padding-left: 30px; background-position: left center;  }
 
+.btn_group li button { display: block; width: 100%; font-size: 16px; font-weight: 700; text-align: center; line-height: 50px; height: 50px; }
+.btn_group li button { position: relative; }
+.btn_group li button.previous {  }
+.btn_group li button.previous:after { position: absolute; left: 10px; top: 50%; margin-top: -8px; display: block; content: ''; clear: both; width: 20px; height: 16px; background-image: url('../../images/mobile/btn_previous_icon.png'); background-repeat: no-repeat; background-position: center; }
+.btn_group li button.confirm { background-color: #427BDC; color:#FFFFFF; font-weight: 700; }
+.btn_group li button.confirm span.check { background-repeat: no-repeat; background-image: url(../../images/mobile/btn_check_icon.png); padding-left: 30px; background-position: left center;  }
+
 /* Check LIST */
 .check_list {}
 .check_list .part { padding: 20px; border-bottom: 1px solid #DDDDDD; }
@@ -321,6 +330,7 @@ input[type="radio"]:checked + label span {  background-image:url('../../images/m
 .health .data .table td .mini { display: block; font-size: 13px; }
 .health .data .guide { font-size: 12px; margin-top: 5px; }
 
+
 .popup { display: none; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background-color: rgba(0,0,0,0.4); z-index: 100; }
 .pop_inner { max-width: 700px; width: 90%; padding: 20px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); box-shadow: 0px 2px 6px rgba(0,0,0,1); border-radius: 3px; background: #fff; } }
 .pop_inner ul {list-style-type: none;}
@@ -352,4 +362,6 @@ input[type="radio"]:checked + label span {  background-image:url('../../images/m
 .pop_inner .btn ul li a.cancle { background-color: #666666; color:#FFFFFF; }
 .pop_inner .btn ul li a.confirm { background-color: #1abc9c; color:#FFFFFf; }
 .error-box{outline:none !important;width:0 !important;height:0 !important;margin:0 !important;border:0 !important;}
+
+
 .error{color:red;}

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 1 - 0
src/main/webapp/resources/js/mobile/bootstrap-datepicker.ko.min.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 8 - 0
src/main/webapp/resources/js/mobile/bootstrap-datepicker.min.js


+ 19 - 10
src/main/webapp/resources/js/mobile/common.js

@@ -34,6 +34,7 @@ function checkMobile(){
     }
 };
 
+
 $(document).ready(function(){
 
     /* NAVIGATION BAR */
@@ -56,14 +57,6 @@ $(document).ready(function(){
 
       $(this).siblings('label').text(select_name);
     });
-    
-    selectTarget.click(function(){
-        
-        if( $( this ).children( "option" ).length == 1 ) {
-            var select_name = $(this).children('option:selected').text();
-            $(this).siblings('label').text(select_name);
-        }
-    });
 
      /* FAQ LIST */
     $('.faq .list li .answer').hide();
@@ -115,5 +108,21 @@ $(document).ready(function(){
           $(this).html('답변닫기');
         }
     });
-    
-});
+
+
+    //----- OPEN
+    $('[data-popup-open]').on('click', function(e)  {
+        var targeted_popup_class = jQuery(this).attr('data-popup-open');
+        $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
+
+        e.preventDefault();
+    });
+
+    //----- CLOSE
+    $('[data-popup-close]').on('click', function(e)  {
+        var targeted_popup_class = jQuery(this).attr('data-popup-close');
+        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
+
+        e.preventDefault();
+    });
+});

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 1 - 1
src/main/webapp/resources/js/mobile/jquery-1.12.4.min.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 2 - 0
src/main/webapp/resources/js/mobile/jquery-3.3.1.min.js


A diferenza do arquivo foi suprimida porque é demasiado grande
+ 4 - 0
src/main/webapp/resources/js/mobile/jquery.validate.min.js