1 개요[ | ]
- jQuery UI 날짜 범위 선택
- jQuery UI 기간 선택
- jQuery UI 날짜 선택에서 단순히 날짜 2개를 선택하도록 하는 경우에는 시작날짜가 끝날짜보다 더 늦은 날짜로 지정하는 것이 가능하다.
- 아래 소스코드는 날짜 선택시(onSelect)에 날짜의 선후가 뒤바뀌지 않도록 되어 있다.
2 소스 코드[ | ]
html
Copy
<!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: '년',
maxDate:'+30d',
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>
3 같이 보기[ | ]
편집자 Jmnote Jmnote bot 118.37.186.245
로그인하시면 댓글을 쓸 수 있습니다.