iframe을 이용한 모달창에서 calendar picker를 사용하려 합니다.

AXISJ
1

modal 을 띄운 메인 화면에도 날짜입력이 from ~to 형태로 있고…

팝업에도 from ~ to 형태로 존재합니다.

http://ax5.io/ax5ui-picker/demo/picker-multidate.html 의 예제대로 생성하면 메인창에서는 제대로 작동을 하는데 팝업창에서는 오류가 발생합니다.

mySinglePicker을 먼저 생성해 두고 사용하는데 .ax5picker 이 정의되어 있지 않다고 에러가 발생하고 있습니다.

$(’[data-ax5picker=“basic”]’).ax5picker(mySinglePicker);

<div data-ax5picker=“register” style=“display: inline-block;”>

<input type=“date” name=“va_start_date” id=“va_start_date” data-ax-path=“va_start_date” data-ax5picker=“basic”>

<span>~</span>

<input type=“date” name=“va_end_date” id=“va_end_date” data-ax-path=“va_end_date” data-ax5picker=“basic”>

<span class=“multi_calendar_selector” style=“padding:17px 10px;width:20px;”><i class=“fa fa-calendar-o”></i></span>

</div>

2

jquery bind 방식으로 picker를 지정하는게 오류가 나서
새로운 인스턴스를 생성해서 config에서 target으로 input type=“date” 항목을 지정했더니 이번에는
아래 첨부된 이미지 처럼 해당 input에 ax5formatter 가 정의되어 있지 않다는 오류가 발생합니다.

페이지 상단에 삽입한 js들에서 폼내부에 선언된 input 태그들에서 ax5formatter를 bind해주지 못하는듯 합니다.
iframe방식 팝업에서는 사용이 불가한건지 제가 뭔자 사용을 잘못해서 그런건지 모르겠네요…

image
image.png2042×1290 326 KB

오류 메시지

image
image.png1792×1192 309 KB

3

팝업창에서 js import가 안되서 그런게 아닐까요?

4

네~ head영역에 태그를 넣었더니… iframe을 사용하는 modal에서는 $(document).ready() 함수가 실행될때 .js가 로딩이 안된상태더라구요.

body태그 맨 아래쪽으로 옮겼더니 에러 없이 잘 실행되었습니다.