<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery UI</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<style>
/*datepicker에서 사용한 이미지 버튼 style적용*/
img.ui-datepicker-trigger {
margin-left:5px; vertical-align:middle; cursor:pointer;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- datepicker 한국어로 -->
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/datepicker-ko.js"></script>
<script>
$(function() {
//오늘 날짜를 출력
$("#today").text(new Date().toLocaleDateString());
//datepicker 한국어로 사용하기 위한 언어설정
$.datepicker.setDefaults($.datepicker.regional['ko']);
// 시작일(fromDate)은 종료일(toDate) 이후 날짜 선택 불가
// 종료일(toDate)은 시작일(fromDate) 이전 날짜 선택 불가
//시작일.
$('#fromDate').datepicker({
showOn: "both", // 달력을 표시할 타이밍 (both: focus or button)
buttonImage: "images/calendar.gif", // 버튼 이미지
buttonImageOnly : true, // 버튼 이미지만 표시할지 여부
buttonText: "날짜선택", // 버튼의 대체 텍스트
dateFormat: "yy-mm-dd", // 날짜의 형식
changeMonth: true, // 월을 이동하기 위한 선택상자 표시여부
//minDate: 0, // 선택할수있는 최소날짜, ( 0 : 오늘 이전 날짜 선택 불가)
onClose: function( selectedDate ) {
// 시작일(fromDate) datepicker가 닫힐때
// 종료일(toDate)의 선택할수있는 최소 날짜(minDate)를 선택한 시작일로 지정
$("#toDate").datepicker( "option", "minDate", selectedDate );
}
});
//종료일
$('#toDate').datepicker({
showOn: "both",
buttonImage: "images/calendar.gif",
buttonImageOnly : true,
buttonText: "날짜선택",
dateFormat: "yy-mm-dd",
changeMonth: true,
//minDate: 0, // 오늘 이전 날짜 선택 불가
onClose: function( selectedDate ) {
// 종료일(toDate) datepicker가 닫힐때
// 시작일(fromDate)의 선택할수있는 최대 날짜(maxDate)를 선택한 종료일로 지정
$("#fromDate").datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
오늘 날짜 : <span id="today"></span>
<form>
<label for="fromDate">시작일</label>
<input type="text" name="fromDate" id="fromDate">
~
<label for="toDate">종료일</label>
<input type="text" name="toDate" id="toDate">
</form>
</body>
</html>
[출처] [jQuery/jQuery UI] Datepicker > 시작일과 종료일 입력시 선택 가능 범위 제한하기|작성자 자바킹
datepicker 속성
$(function() {
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd', // 날짜표현타입
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
changeMonth: true, //월변경가능
changeYear: true, //년변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
buttonImageOnly: true, //달력 이미지표시
buttonImage: '<?php echo _SITE_COMMON_LIB?>/script/images/calendar.gif', // 달력 이미지파일
buttonText: '날짜를 선택하세요', // 달력이미지에 마우스오버일경우
autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
showOn: 'both', //엘리먼트와 이미지 동시 사용
showButtonPanel:true, // 캘린더 하단에 버튼 패널을 표시한다(오늘날짜로이동버튼, 닫기버튼).
currentText: '오늘', // 오늘날짜로이동되는 버튼의 텍스트 변경
showAnim: "slideDown", //애니메이션을 적용한다.
closeText: '닫기', // 닫기버튼의 텍스트 변경
// 연도 셀렉트 박스 범위(현재연도의 - + 20연도)
yearRange: (datepicker_year.getFullYear()-20) + ':' + (datepicker_year.getFullYear()+20),
//firstDay: 0, // 주의 시작일을 일요일로 하려면 0, 월요일은 1 (기본값 0)
//isRTL: false, // 버튼이미지 좌우 위치
cleanText: '지우기' //추가한 기능 jquery-ui.js 파일에 소스 추가해아한다.
});
});'Web > jQuery' 카테고리의 다른 글
| [jQuery] <form> 태그 내에서 엔터키 막기 (0) | 2022.10.21 |
|---|---|
| [jQuery] window와 document 의 차이 (0) | 2022.10.21 |
| [jQuery] 제이쿼리 jQuery 란? (1) | 2022.10.21 |
