목표
1. 예약 시작&끝 시간 timepicker로 적용
(원래 시간은 select로 선택하는걸로 하였는데 timepicker를 사용하는게 더 나을것 같다는 판단)
2. DB에 저장되어 있는 예약정보 달력에 불러오기
상황
1. 시간은 timepicker를 사용하려고 하였는데 찾아보니 datetimepicker라고 날짜와 시간을 한번에 선택 할 수 있는 라이브러리도 있어서 전일 날짜 입력받는 부분에 적용하였던 datepicker를 날짜와 시간을 함께 선택할 수 있는 datetimepicker로 변경
문제
▸timepicker를 사용하지 않고 datetimepicker로 변경한 이유가 시작시간과 끝시간 선택시 날짜에 따라 선택제한되게 하려고 한건데 관련 함수가 없었음. 그래서 시간 선택시 내가 만든 함수가 떠서 스크립트 처리해주려고 했는데 시간 선택시 해당 함수가 불러와지지 않음. 또한 클릭 event 처리를 하려고 했는데 alert은 해당 이벤트가 실행되지 않아도 form이 열리면 그냥 alert창이 뜨는 문제가 생김
원인
▸datetimepicker 부트스트랩이 ajax로 실행되는데 ajax는 레디 시작준비할때 event에 들어간 관련사항이 알아서 처음에 전부 레디가 되기 때문에 실행되는것 같음. 내가 알아본 결과론~!
해결
▸.on(click,) 을 사용하면 클릭할때 이벤트가 진행되지 않는건 .blur를 사용하여 해결.
▸하지만 여기서 문제가 생겼던게 클릭했을때 그 시간값을 가져와야하는데 getTime, click 등 사용하더라도 클릭 이전의 지정되어있던 값만 가져옴........... 스크립트 처리해서 바로 alert창 띄우고 선택 못하게 하고 싶어서 이걸 쓴건데 결국 form에서는 시간선택 설정을 바로 못잡아주고 controller로 값 가져가서 저장전에 시간 확인하는 메소드를 통해 확인해야겠음 >> 위에 클릭이벤트 하루종일 ㅎㅏ느라 이건 나중에 유효성 검사, 버그 잡을때 적용하는걸로
📃 공부한 내용
datetimepicker 라이브러리에 내장되어 있는 함수 기능들과 비동식방식을 통한 클릭이벤트 넣는 방법! 클릭이벤트가 진행되지 않는 이유에 대해 구글검색을 통한 겉핧기식 지식 습득
💬 coment
부트스트랩 가져다 쓰는거 쉽지 않다. 그리고 ajax.... 비동기방식 정말 편리하지만 함수가 왜이렇게 안먹는지 그...거에 따라 다르네 여튼 datetimepicker 적용까진 완료했으니 다행. 시간은 따로 dao에서 처리해줘야겠지만 오늘은 이걸로 만족해야지 머리 터질뻔 했숨다.
'개발일지 > 2차 final project' 카테고리의 다른 글
[개발일지⑦] 일정 페이지 기능구현 (0) | 2021.09.14 |
---|---|
[개발일지⑥] DB에 저장된 예약데이터 달력에 가져오기 (0) | 2021.09.14 |
[개발일지④] 예약하기 form 수정 - 날짜 입력받는 부분에 datepicker 적용 (0) | 2021.09.09 |
[개발일지③] fullcalender 라이브러리 사용하여 예약하기 구현 (2) (0) | 2021.09.07 |
[개발일지②] fullcalendar 라이브러리 사용하여 예약하기 구현 (0) | 2021.09.06 |