jQuery UI 기간 선택 (datepicker)

1 개요

jQuery UI 날짜 범위 선택
jQuery UI 기간 선택

jQuery UI 날짜 선택에서 단순히 날짜 2개를 선택하도록 하는 경우에는 시작날짜가 끝날짜보다 더 늦은 날짜로 지정하는 것이 가능하다.
아래 소스코드는 날짜 선택시(onSelect)에 날짜의 선후가 뒤바뀌지 않도록 되어 있다.

2 소스 코드

<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
  var dates = $( "#from, #to " ).datepicker({
  prevText: '이전 달',
  nextText: '다음 달',
  monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  dayNames: ['일','월','화','수','목','금','토'],
  dayNamesShort: ['일','월','화','수','목','금','토'],
  dayNamesMin: ['일','월','화','수','목','금','토'],
  dateFormat: 'yy-mm-dd',
  showMonthAfterYear: true,
  yearSuffix: '년',
  onSelect: function( selectedDate ) {
    var option = this.id == "from" ? "minDate" : "maxDate",
      instance = $( this ).data( "datepicker" ),
      date = $.datepicker.parseDate(
        instance.settings.dateFormat ||
        $.datepicker._defaults.dateFormat,
        selectedDate, instance.settings );
    dates.not( this ).datepicker( "option", option, date );
  }
  });
});
</script>
<p>조회기간: <input type="text" id="from"> ~ <input type="text" id="to"></p>

http://zetawiki.com/jqui/ex04.php

3 같이 보기