[헤이버디] DateTimePicker 달력 적용시키기 (3분 소요)

---

 

1.DataTimePicker.zip 다운로드 및 압축풀기 후 Spring에 폴더 세팅

2. 자바스크립트 링크 연결시켜주기

3. 필요한 데이터 내용 가져와서 자바스크립트에 사용하기

 

---

시작

https://xdsoft.net/jqplugins/datetimepicker/

 

DateTimePicker

 

 

 

 다음 사이트에서 Download.zip를 가져 올 수 있다.

 

 

 

 

 

아래 download(zip). 눌르면 최신파일이 다운 받아진다.

 

 

잘모르겠으면, 필자가 올려둔것을 사용해도 좋다.

 

datetimepicker-master.zip

0.29MB

 

 

 

압축을 풀고 

 

본인이 잘 사용하는 css위치,  js위치의 폴더랑 잘 세팅한다.

 

 

 

 

 

 

본인은 경로를 이런식으로 설정해서

 

 

 

 

 

 

 

파일이 잘 적용되야지 달력이 잘 나온다.

 

 

 

 

⭐⭐⭐⭐⭐

planList.jsp

 

 

<input 박스>

<input class="form-control mb-3" type="text" id="hyplDate" name="hyplDate" <fmt:formatDate value="${hyplDate}" pattern="yyyy-MM-dd HH:mm:ss"/> placeholder="시작일 등록해주세요" autocomplete="off">

 

 

input박스의 id와

 

스크립트 적용

 

$('#인풋박스id')

 

일치시켜야 합니다!

 

 

 

<스크립트 연결>

 

<!--  제이쿼리 시간포함 달력 -->
	<link rel="stylesheet" type="text/css" href="/resources/datetimepicker-master/build/jquery.datetimepicker.min.css"/ >
	<script src="/resources/datetimepicker-master/build/jquery.datetimepicker.full.min.js"></script>

 

 

 

 

 

<스크립트 적용>

 

	<script type="text/javascript">  /* 달력에 한글화 해주는 영역*/
			
			jQuery.datetimepicker.setLocale('kr');
			
			 
			
			 $(function() {
			$('#hyplDate').datetimepicker({
			lang : 'ko', /* 한국어 사용하게하는 영역 */
			format:'Y-m-d H:i:00', /* 시간까지 보이게 하는 영역 */
			
			
			});
			});
            
            </script>

 

 

 

 

결과값

 

 

 

 

 

 

 

 

일정작성시 시간 단위로도 쪼갤수도 있다는 생각에

 

DateTimePicker라는 것을 사용

 

 

 

 

 

 

 

 

Jquery를 보통사용하면 날짜만 선택 할 수 있게 나온다.

 

그치만 시간까지 설정할 수 있도록 만들면,

 

더 자세한 일정을 만들 수 있을 것이다.

 

 

 

 

 

 

 

이렇게 해서 등록하게 되면, 

 

원하는 날짜와 시간에 데이터가 일정등록이 

 

되는것을 확인해 볼 수 있다.

 

 

 

 

 

 

 

 

주별로 일정 확인

 

 

 

 

 

 

이벤트를 모아둔것을 볼 수 있다.

 

 

 

 

 

 

---

 

 

 

 

To be continue..