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

웹프로그래밍을 하다보면 가끔 시작일과 종료일을 입력 받는 프로그램을 제작 하곤 한다. 사용자에게 날짜를 입력 받아야 하는데 텍스트박스만 떡하니 나두면 사용자가 제대로 된 데이터를 입력하지 않아 에러가 발생 될수 있다. 이럴 경우를 대비하여 보통 달력을 띄우거나 셀렉트박스로 만들게 되는데 셀렉트박스 보다는 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를 지정하여 선택하지 못하도록 하는 방식이다.

위 소스를 적용한 예제를 확인하려면 여기를 클릭 하도록 하자.

(추가:2013-09-28)
신영기님의 코멘트를 보고 해당 내용을 추가하였다.
추가된 예제에는 기본 시작일과 종료일을 자바스크립트로 계산하여 입력하도록 추가 하였고 종료일을의 maxDate를 시작일+7일 로 설정 되도록 추가 하였다.
예제확인하기

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

  • 덕이

    출처 남기고 퍼갑니다 고맙습니다.

  • 신영기

    안녕하세요 쓰신글을보고 많이 배웠습니다.
    다름이 아니라 예제를 보니깐 10일전후로 시작일과종료일이 지정되어 들어가던데
    그것은 어떻게하였는지 궁금해서 질의합니다..
    그리고 시작일 + 7일 까지만 선택하게 할려고하는데 그에대한 예제나 답변부탁드려요

    • 기본값으로 날짜가 들어가는 것은 PHP date() 함수를 이용하여 출력되게 한것 입니다.
      PHP를 이용 하실 수 있으면 date 함수 이용하셔서 출력하는 모양대로 input box 에 미리 넣으시면 됩니다. 자바스크립트를 이용하여 기본값을 주고 싶으시면 아래 내용을 추가 하시면 됩니다.

      var today = new Date();
      var start_month = (today.getMonth() + 1);
      var start_day = today.getDate();
      start_month = (start_month < 10) ? "0"+start_month : start_month;
      start_day = (start_day < 10) ? "0"+start_day : start_day;
      var start_date = today.getFullYear() + "-" + start_month + "-" + start_day;
      today.setDate(today.getDate()+10);
      var end_month = (today.getMonth() + 1);
      var end_day = today.getDate();
      end_month = (end_month < 10) ? "0"+end_month : end_month;
      end_day = (end_day < 10) ? "0"+end_day : end_day;
      var end_date = today.getFullYear() + "-" + end_month + "-" + end_day;
      $("#sdate").val(start_date);
      $("#edate").val(end_date);

      그리고 시작일 +7일 까지만 선택 하게 하신다는게 시작일을 선택하면 종료일을 시작일+7일 까지만 선택 하고 싶으신 거죠?
      이건 maxDate 값을 시작일+7일로 설정하도록 시작일 달력을 닫을때 설정하거나 종요일 달력을 열때 설정하도록 하면 됩니다.
      예제를 드리자면 시작일 onClose 설정 부분에 아래 내용을 추가 하시면 됩니다.

      $('#edate').datepicker("option", "beforeShow", function () {
      var stxt = $("#sdate").val().split("-");
      stxt[1] = stxt[1] – 1;
      var sdate = new Date(stxt[0], stxt[1], stxt[2]);
      var mdate = new Date(stxt[0], stxt[1], stxt[2]);
      mdate.setDate(sdate.getDate()+7);
      $("#edate").datepicker( "option", "maxDate", mdate );
      });

      본문 내용에 예제도 추가 하였으니 예제 및 해당 소스코드 확인해주세요. ^^ (소스코드는 소스보기로.;)