datepicker 시작일과 종료일 설정 시 사용하기 좋은 팁

웹 프로그래밍을 하다 보면 가끔 시작일과 종료일을 입력받는 프로그램을 제작하곤 한다. 사용자에게 날짜를 입력받아야 하는데 텍스트 박스만 떡하니 놔두면 사용자가 제대로 된 데이터를 입력하지 않아 에러가 발생 될 수 있다. 이럴 경우를 대비하여 보통 달력을 띄우거나 SelectBox로 만들게 되는데 SelectBox 보다는 jQuery UI에서 지원하는 datepicker를 이용하는 게 훨씬 쉬울 것이다.

datepicker 를 이용하면 사용자에게 날짜를 입력받기가 너무나도 쉽다. 하지만 시작일과 종료일을 받아야 하는 상황에서 사용자가 시작일을 종료일보다 뒤의 날짜를 선택하거나 종료일을 시작일 보다 앞의 날짜를 선택한다면 원하는 결과를 가져올 수 없을 것이다.

그럼 datepicker 로 시작일을 선택할 때 종료일보다 나중의 날은 선택할 수 없게 하고, 종료일을 선택할 때는 시작일 이후로만 선택 할 수 있게 한다면?
위에서 말한 오류는 충분히 방지 할 수 있을 것이다.
그렇다면 datepicker 에서 시작일 일에는 자동으로 종료일보다 먼저인 날짜만 종료일에는 자동으로 시작일보다 나중인 날짜만 선택하는 아래 소스를 참고하자.!

$(document).ready(function () {
  $.datepicker.regional['ko'] = {
    closeText: '닫기',
    prevText: '이전달',
    nextText: '다음달',
    currentText: '오늘',
    monthNames: [
      '1월(JAN)',
      '2월(FEB)',
      '3월(MAR)',
      '4월(APR)',
      '5월(MAY)',
      '6월(JUN)',
      '7월(JUL)',
      '8월(AUG)',
      '9월(SEP)',
      '10월(OCT)',
      '11월(NOV)',
      '12월(DEC)',
    ],
    monthNamesShort: [
      '1월',
      '2월',
      '3월',
      '4월',
      '5월',
      '6월',
      '7월',
      '8월',
      '9월',
      '10월',
      '11월',
      '12월',
    ],
    dayNames: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
    dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
    weekHeader: 'Wk',
    dateFormat: 'yy-mm-dd',
    firstDay: 0,
    isRTL: false,
    showMonthAfterYear: true,
    yearSuffix: '',
    showOn: 'both',
    buttonText: '달력',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    yearRange: 'c-99:c+99',
  }
  $.datepicker.setDefaults($.datepicker.regional['ko'])

  $('#sdate').datepicker()
  $('#sdate').datepicker('option', 'maxDate', $('#edate').val())
  $('#sdate').datepicker('option', 'onClose', function (selectedDate) {
    $('#edate').datepicker('option', 'minDate', selectedDate)
  })

  $('#edate').datepicker()
  $('#edate').datepicker('option', 'minDate', $('#sdate').val())
  $('#edate').datepicker('option', 'onClose', function (selectedDate) {
    $('#sdate').datepicker('option', 'maxDate', selectedDate)
  })
})

datepicker의 메소드 중 onClose를 이용하여 사용자가 날짜를 선택하면 반대 달력의 maxDate와 minDate를 지정하여 선택하지 못하도록 하는 방식이다.
위 코드를 이용하여 실제 구현한 예제 링크를 추가 한다.

• Javascript Example: datepicker 시작일 종료일 설정 - 예제1
• Javascript Example: datepicker 시작일 종료일 설정 - 예제2