datepicker 사용법 총정리 및 사이트 공유

개체가 'datepicker' 속성이나 메서드를 지원하지 않습니다

에러가 발생할 경우 확인 요소

JS로 datepicker를 호출하는 위치가 JQUERY 파일을 불러오는것보다 코드가 먼저 쓰여졌는지 확인

JQUERY를 불러오는 걸 먼저 해주어야한다.

또 중복으로 JQuery파일을 불러오는지 확인 해주어야한다.

 

다운로드

참고 사이트: https://programmer93.tistory.com/29

jQuery UI datepicker 사용법 - 삽질중인 개발자

 

에러관련 참고 사이트: https://satto.tistory.com/entry/datepicker-%EC%82%AC%EC%9A%A9%EC%8B%9C-%EC%97%90%EB%9F%AC

datepicker 사용시 에러

 

datepicker 맨위로 보여지도록 하는 방법 참고

: z-index값을 올려서 맨위로 보여지도록 설정한다.

https://okky.kr/article/412017?note=1292549 

OKKY | jQuery 달력을 맨 앞으로 나타내고 싶습니다 ㅠㅠ

https://okky.kr/article/412017?note=1292549 

OKKY | jQuery 달력을 맨 앞으로 나타내고 싶습니다 ㅠㅠ

 

// datepicker 호출하는 부분에 beforeShow 속성부분을 추가
$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

 

실질적으로 처리한 코드

$(document).ready(function() {
	//alert("radio: " + radio);
	/* 검색조건:날짜 (Datepicker적용) */
	$("input[name=order_start_date]").datepicker(
	{
		changeMonth : true,
		changeYear : true,
		showButtonPanel : true,
		dateFormat : "yy/mm/dd",
		beforeShow: function() {
	        setTimeout(function(){
	            $('.ui-datepicker').css('z-index', 9999);
	        }, 0);
	    }
		
	});