안녕하세요. 명월입니다.
이 글은 Jquery의 달력 라이브러리 Datepicker에 대한 글입니다.
Datepicker는 텍스트 박스에 포커스를 넣으면 달력 표시가 나와서 선택할 수 있는 jquery 라이브러리에서 제공하는 component입니다.
링크 - https://jqueryui.com/datepicker/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<!-- jquery UI 링크 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<p><input type="text" id="from"> ~ <input type="text" id="to"></p>
<p><input type="text" id="alternateFrom" size="30"> ~ <input type="text" id="alternateTo" size="30"></p>
<!-- jquery CDN -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- jquery UI CDN -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- 언어 별 CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/i18n/jquery.ui.datepicker-ko.min.js"></script>
<!-- Date 라이브러리 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
$(function(){
var option = {
// datepicker 애니메이션 타입
// option 종류 : "show" , "slideDown", "fadeIn", "blind", "bounce", "clip", "drop", "fold", "slide"
showAnim : "slideDown",
// 해당 월의 다른 월의 날짜가 보이는 여부, 예를 들면 10월이면 전후에 9월 마지막과 11월의 시작 일이 보이는 여부입니다. 즉, 달력이 꽉 차 보이게 하는 것
showOtherMonths: true,
// 선택 여부 (showOtherMonths 옵션과 같이 일치시키지 않으면 에러가 발생합니다.)
selectOtherMonths: true,
// 달력 밑에 오늘과 닫기 버튼이 보인다.
showButtonPanel: true,
// 년 월이 셀렉트 박스로 표현 되어서 선택할 수 있다.
changeMonth: true,
changeYear: true,
// 한번에 보이는 개월 수
numberOfMonths: 3,
// 데이터 포멧
dateFormat: "yy-mm-dd",
// 텍스트 박스 옆의 달력 포시
showOn: "button",
//이미지 타입인지 버튼 타입인지 설정
buttonImageOnly: true,
// 이미지 경로
buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
// 버튼 타입이면 버튼 값
buttonText: "Select date",
// alt 데이터 포멧
altFormat: "DD, d MM, yy",
// 선택 가능한 날짜(수 형식) - 현재 기준 -20일
minDate: -20,
// 선택 가능한 최대 날짜(문자 형식) - 현재 기준 +1월 +20일
maxDate: "+1M +20D",
// 주 표시
showWeek: true
};
var optionFrom = option;
optionFrom.altField = "#alternateFrom";
var dateFormat = "mm/dd/yy";
// 시작일이 선택이 되면 종료일은 시작일 보다 앞을 선택할 수 없다.
var from = $( "#from" )
.datepicker(optionFrom)
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
});
var optionTo = option;
optionTo.altField = "#alternateTo";
// 종료일이 선택이 되면 시작일은 시작일 보다 앞을 선택할 수 없다.
var to = $( "#to" )
.datepicker(optionTo)
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
return moment(element.value).toDate();
}
});
</script>
</body>
</html>
예제 - 옆의 달력 표시를 눌러서 라이브러리 예제를 확인하세요.
~
~
참고로 각 언어별 cdn 링크 입니다.
링크 - https://cdnjs.com/libraries/jqueryui/1.9.2
jquery docment에서는 문자에서 Date형으로 변경하는데 「$.datepicker.parseDate」를 사용해서 변형하라고는 했는데 에러가 나네요... jquery 3.1과는 호환이 안되나?
해서 moment 라이브러리를 사용하니 문제없이 잘 됩니다. (이것 때문에 jquery.ui 라이브러리를 다 뒤졌습니다. ㅠㅠ)
링크 - [Javascript]날짜 포맷 설정하는 방법(moment 라이브러리)
여기까지 Jquery의 달력 라이브러리 Datepicker에 관한 내용였습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |
|---|---|
| [Javascript] Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법 (0) | 2019.11.01 |
| [Jquery] Sortable(마우스 드래그 앤 드롭으로 리스트 정렬) (0) | 2019.10.24 |
| [Jquery] 다이얼로그 Dialog (0) | 2019.10.23 |
| [Jquery] CSS로 작성 된 loader 마크 (0) | 2019.10.16 |
| [Jquery] ajax 함수 사용 방법 (2) | 2019.10.16 |
| [Javascript] window.history (0) | 2019.09.02 |
| [Javascript] Clipboard를 사용하는 방법(Ctrl + c 할때 출처 붙이기) (0) | 2019.08.20 |