jQuery datepicker 날짜 초기화하기

jQuery와 날짜 관련 js라이브러리 datepicker를 사용 중
시작일자와 종료일자가 서로 침범하지 않도록 검증을 하는 기능이 존재하여
날짜를 다시 선택하고자 할 때 불편함이 발생.
입력된 날짜를 초기화해야 하는 기능 구현이 필요.

 

1. 입력된 날짜 value 값을 빈 값으로 초기화

 

$('시작날짜선택자').datepicker('setDate', "");
$('종료날짜선택자').datepicker('setDate', "");

1번 과정만 진행하였을 때 화면상에 input box에는 아래 이미지처럼 값이 비어있는 것으로 보이지만
클릭을 하였을 때 이전에 선택하였던 날짜가 선택되어 있어 초기화라고 할 수 없음.

2. datepicker 기능 해제

 

$('시작날짜선택자').datepicker('destroy');  
$('종료날짜선택자').datepicker('destroy');

 

2번까지 진행 후 다시 달력을 클릭 하면 
콘솔 창에 "Cannot read property 'settings' of undefined" 에러 메시지를 확인할 수 있을 것이다.

 

3. datepicker 재생성

 

$('날짜선택자').datepicker({
	...
})

 

화면에 들어올 때 동작하는 datepicker 재생성
환경설정 정보 동일하게 셋팅해줘야 동일한 달력이 표출됨.

3번 부분을 함수로 만들어서 작성하면 보기 좋은 형식으로 처리할 수 있음.

 

참고자료
https://api.jqueryui.com/datepicker/#method-destroy