modal 팝업창에서 datepicker 사용 시 연도 월 Select box가 열리지 않는 문제 해결 방법

Open API/Jquery|2017.09.18 13:51


Bootstrap modal 팝업창에서 datepicker 사용 시 


changeMonth , changeYear 옵션을 true 로 사용할 경우 정상적으로 펼쳐지지 않고


바로 닫히는 버그가 있는데 꽤 오래된 상황임에도 업데이트가 되어지지 않고 있습니다.




하지만,  역시 스택오버플로우 


https://stackoverflow.com/questions/22050641/month-select-in-datepicker-inside-a-bootstrap-modal-wont-work-in-firefox


해결 방안을 제시해줍니다.


$('#modal').on('show', function () {
    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});




위와 같이 Show 혹은 modal 팝업 활성화 이후에

    $.fn.modal.Constructor.prototype.enforceFocus = function () { };

위와 같은 코딩을 실행해주면 정상적으로 연도 및 월 변경이 가능합니다.


댓글()

jQuery 동적으로 추가된 객체에 datepicker() 적용하기

Open API/Jquery|2016.11.15 17:17




동적으로 추가(append)되거나 복제된(clone) 객체에서 


DatePicker()가 작동하지 않는 문제가 확인되어


구글링을 통해 방법들을 찾아보니 hasDatepicker Class가 문제 인지라..


해당 클래스 제거 후 다시 DatePicker 설정을 해줘야 작동합니다.




// 지정된 객체 처리시
$(this).removeClass('hasDatepicker').datepicker();
 
// 클래스를 이용한 처리
$(document).find(".JCaldendar").removeClass('hasDatepicker').datepicker({
    dateFormat: "yy-mm-dd",
    defaultDate: "+1w",
    numberOfMonths: 1,
    changeMonth: true,
    showMonthAfterYear: true ,
    changeYear: true
});


참고 Url : 
http://pdw213.egloos.com/4209246
http://www.sitekickr.com/blog/jquery-datepicker-work-cloned-elements/


댓글()

jQuery datepicker 달력 샘플

Open API/Jquery|2016.11.11 09:30



API Url : http://jqueryui.com/datepicker/

Document : http://api.jqueryui.com/datepicker/


Test Url : http://www.uhoon.co.kr/test/1876.html


딱히 설명이 필요없는....달력입니다..


DatePicker


다양한 기능이 있지만 개인적으로 주로 사용하는 옵션은 아래와 같습니다..


주로 영문상태를 쓰지만 요일, 월 한글명은 필수옵션은 아닙니다.



* 기간 선택 

- 시작일 변경시 종료일 min Date 를 시작일로 변경

- 종료일 변경시 시작일의 max Date 를 종료일로 변경 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>datepicker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script>
    $(function() {
        // 기간 설정 타입 1 
        // start Date 설정시 end Date의 min Date 지정
        $( "#startDt" ).datepicker({
            dateFormat: "yy-mm-dd",
            dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
            monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
            monthNamesShort: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
            defaultDate: "+1w",
            numberOfMonths: 1,
            changeMonth: true,
            showMonthAfterYear: true ,
            changeYear: true,
            onClose: function( selectedDate ) {
                $( "#endDt" ).datepicker( "option", "minDate", selectedDate );
            }
        }); 
         // end Date 설정시 start Date max Date 지정
        $( "#endDt" ).datepicker({
            dateFormat: "yy-mm-dd",
            dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
            monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
            monthNamesShort: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
            defaultDate: "+1w",
            numberOfMonths: 1,
            changeMonth: true,
            showMonthAfterYear: true ,
            changeYear: true,
            onClose: function( selectedDate ) {
                $( "#startDt" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
 
        // 기간 설정 타입 2 
        // start Date 설정시 end Date 가 start Date보다 작을 경우 end Date를 start Date와 같게 설정
        $("#startDt").datepicker({
            dateFormat: "yy-mm-dd",
            defaultDate: "+1w",
            numberOfMonths: 1,
            changeMonth: true,
            showMonthAfterYear: true ,
            changeYear: true,
            onClose: function( selectedDate ) {
                if ($( "#endDt" ).val() < selectedDate)
                {
                    $( "#endDt" ).val(selectedDate);
                }
            }
        }); 
        // end Date 설정시 end Date 가 start Date 보다 작을 경우 start Date를  end Date와 같게 설정
        $( "#endDt" ).datepicker({
            dateFormat: "yy-mm-dd",
            defaultDate: "+1w",
            numberOfMonths: 1,
            changeMonth: true,
            showMonthAfterYear: true ,
            changeYear: true,
            onClose: function( selectedDate ) {
                if ($("#startDt" ).val() > selectedDate)
                {
                    $("#startDt" ).val(selectedDate);
                }
            }
        });
 
 
        //날짜
        $( "#date" ).datepicker({
            changeMonth: true ,
            changeYear: true ,
            showMonthAfterYear: true ,
            dateFormat: "yy-mm-dd",
            dayNamesMin: [ "일", "월", "화", "수", "목", "금", "토" ],
            monthNames: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
            monthNamesShort: [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월" ],
            defaultDate: "+1w",
            numberOfMonths: 1
        }); 
    }); 
</script>
</head>
<body>
<div>
    <label for="날짜">날짜</label><input type="text" id="date" value=""/>
</div>
<div style="padding-top:50px;">
    <label for="기간">기간</label><input type="text" id="startDt" /> ~ <input type="text" id="endDt" />
</div>
</body>
</html>



댓글()