SUNKYUN.COM

jquery datepicker를 사용하다가 날짜를 선택할 때 선택 범위를 제한해야 할 때가 있다.

$(selector).datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: 0
});

일반적으로는 minDate에 0을 주면 오늘날짜부터 선택할 수가 있다.

그런데 내가 하고 싶은 것은 오늘날짜가 아닌 특정날짜 이후, 그리고 이전으로 범위를 제한하고 싶었다.

다음과 같이 하면 된다.

$(selector).datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: new Date('2017-12-01'),
  maxDate: new Date('2017-12-31')
});

이렇게 하면 2017년 12월 1일부터 31일까지로 날짜 선택할 수 있는 범위가 제한된다.

그런데 보통 이렇게 하드코딩하지 않고 동적으로 범위가 변할 경우가 많기 때문에 

'2017-12-01' 대신에 변수를 넣는 것이 맞겠지.

아래는 팁.

$(selector).datepicker({
  dateFormat: 'yy-mm-dd',
  minDate: new Date('2017-12-01'),
  maxDate: new Date('2017-12-31'),
  onClose: function() {
    $(selector2).datepicker({
      dateFormat: 'yy-mm-dd',
      minDate: new Date(selector의 시작날),
      maxDate: new Date('2017-12-31')
    });
  });
});

이렇게 하면 datepicker를 두 개 쓸 때 

두 번째 datepicker에서 첫 번째 selector에서 선택한 날짜 이후부터 날짜를 선택할 수 있다.

출처:https://triest.tistory.com/3