한 화면에 datepicker 여러개 사용하기

lgw2236·2022년 11월 11일
0

개발기록

목록 보기
2/8
post-thumbnail

한 화면에 datepicker를 중복으로 여러개 사용하는 경우가 있었는데
하나의 케이스에서만 datepicker가 적용되고 나머지 케이스에서는
공백으로 적용 되지 않는 현상이 있었다.

이에 해결했던 방법을 기록하고자 한다..

여러 datepicker 여러개 사용하는 방법

function setFunction1(){
	$("#시작일").datepicker("destroy");
	$("#종료일").datepicker("destroy");		
    $("#시작일").datepicker({
        onSelect: function(selected) {
          $("#종료일").datepicker("option","minDate", selected)
        }
    });
    
    $("#종료일").datepicker({ 
        onSelect: function(selected) {
          $("#시작일").datepicker("option","maxDate", selected)
        }
    });
}


function setFunction2(){
	$("#시작일2").datepicker("destroy");
	$("#종료일2").datepicker("destroy");		
    $("#시작일2").datepicker({
        onSelect: function(selected) {
          $("#종료일2").datepicker("option","minDate", selected)
        }
    });
    
    $("#종료일2").datepicker({ 
        onSelect: function(selected) {
          $("#시작일2").datepicker("option","maxDate", selected)
        }
    });
}

...

주의사항

해당 화면의 DOM이 onload 할때나 필요한 시점에 해당 datepicker를 설정한
function 들/을 선언해주면 된다.
물론 이때 function에 들어있는 datepicker 영역의 input id or name은
중복되어선 안된다.

profile
어제보다 오늘 더

0개의 댓글