2017 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
JS – datepicker(jQueryUI,달력) 이용시 두개 날짜 범위 설정

jquery UI 의 datepicker를 이용해서 input 칸에 포커스 했을 때 달력이 나오고 날짜를 선택하면 input 칸에 값이 들어가는 기본 베이스를 사용하면서 아래와 조건이 있는 경우가 있어서 예제를 만들어 보았다.

  • 특정 기간 범위 설정
  • 특정 기간 범위만 활성화
  • 시작 달력과 끝 달력에 오늘 이전 날짜들은 기본 비활성화 한다.
  • 시작 달력과 끝 달력을 수차례 수정해도 특정 기간 범위를 넘길 수 없게 만듦
  • 시작 달력과 끝 달력의 날짜 선택이 거꾸로 될 수 없게 만듦

 

기간 선택

 

시작일

 

 

~ 종료일

 

위 처럼 input을 두개 두고 시작 달력은 #from, 끝 달력은 #to 로 지정하였다.

rangeDate 는 특정 기간 범위이다.
예로 31일을 설정하였다.

이제 유효 검사를 추가해본다.

.btn이라는 클래스를 가진 버튼 엘리먼트를 누르면 검색 범위를 초과한 경우 다시 경고창이 뜨고 다시 설정하도록 인도한다.

아래 코드 결과 화면을 참고하자.

 

HoldHolic

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.