- datepicker 사용법 및 옵션 정리 -
사용할 bootstrap-datepicker plugin 은 아래에 있는 플러그인을 사용합니다.
부트스트랩 데이트 피커 플러그인은 옵션 설정으로 한국어도 지원한다.
한국어 버전의 캘린더를 원한다면 bootstrap-datepicker.ko.min.js 를 로드한다.
uxsolutions/bootstrap-datepicker
A datepicker for twitter bootstrap (@twbs). Contribute to uxsolutions/bootstrap-datepicker development by creating an account on GitHub.
github.com
깃허브에서 다운 받고 JS 폴더 안에 있는 bootstrap-datepicker.js , css 폴더 안에 있는 bootstrap-datepicker.css 를 jsp에 스크립트를 로드해준다.
한국어 버전의 캘린더를 원한다면 locales 폴더안에 있는 bootstrap-datepicker.ko.min.js 를 로드한다.
JS , CSS 파일 로드
<!-- datepicker 는 jquery 1.7.1 이상 bootstrap 2.0.4 이상 버전이 필요함 -->
<!-- jQuery가 먼저 로드 된 후 datepicker가 로드 되어야함.-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="resources/css/plugin/datepicker/bootstrap-datepicker.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="resources/js/plugin/datepicker/bootstrap-datepicker.js"></script>
<!--한국어 달력 쓰려면 추가 로드-->
<!-- <script src="resources/js/plugin/datepicker/bootstrap-datepicker.ko.min.js"></script> -->
1. 기본 사용 방법
<!-- 우선 body 부분에 input tag를 하나 만들어준다. -->
<body>
<!-- 시작시 기본 날짜 설정은 value를 이용 -->
<input type="text" id="datePicker" class="form-control" value="2019-06-27">
</body>
자바 스크립트 부분입니다.
<script>
$(function() {
$('#datePicker').datepicker({
format: "yyyy-mm-dd", //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
startDate: '-10d', //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
endDate: '+10d', //달력에서 선택 할 수 있는 가장 느린 날짜. 이후로 선택 불가 ( d : 일 m : 달 y : 년 w : 주)
autoclose : true, //사용자가 날짜를 클릭하면 자동 캘린더가 닫히는 옵션
calendarWeeks : false, //캘린더 옆에 몇 주차인지 보여주는 옵션 기본값 false 보여주려면 true
clearBtn : false, //날짜 선택한 값 초기화 해주는 버튼 보여주는 옵션 기본값 false 보여주려면 true
datesDisabled : ['2019-06-24','2019-06-26'],//선택 불가능한 일 설정 하는 배열 위에 있는 format 과 형식이 같아야함.
daysOfWeekDisabled : [0,6], //선택 불가능한 요일 설정 0 : 일요일 ~ 6 : 토요일
daysOfWeekHighlighted : [3], //강조 되어야 하는 요일 설정
disableTouchKeyboard : false, //모바일에서 플러그인 작동 여부 기본값 false 가 작동 true가 작동 안함.
immediateUpdates: false, //사용자가 보는 화면으로 바로바로 날짜를 변경할지 여부 기본값 :false
multidate : false, //여러 날짜 선택할 수 있게 하는 옵션 기본값 :false
multidateSeparator :",", //여러 날짜를 선택했을 때 사이에 나타나는 글짜 2019-05-01,2019-06-01
templates : {
leftArrow: '«',
rightArrow: '»'
}, //다음달 이전달로 넘어가는 화살표 모양 커스텀 마이징
showWeekDays : true ,// 위에 요일 보여주는 옵션 기본값 : true
title: "테스트", //캘린더 상단에 보여주는 타이틀
todayHighlight : true , //오늘 날짜에 하이라이팅 기능 기본값 :false
toggleActive : true, //이미 선택된 날짜 선택하면 기본값 : false인경우 그대로 유지 true인 경우 날짜 삭제
weekStart : 0 ,//달력 시작 요일 선택하는 것 기본값은 0인 일요일
language : "ko" //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
});//datepicker end
});//ready end
</script>
2. 이벤트 감지 방법
// 기본 이벤트 감지 메소드는 아래와 같은 형태이다
$('#datePicker').datepicker({
format: "yyyy-mm-dd", //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
startDate: '-10d', //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
... //생략
language : "ko" //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
})//여기까지가 기본 사용 방법
.on(picker_event, function(e) {
//picker_event는 "이벤트명" 이런 식으로 적는다.
//하고 싶은 행동
}
//실제 사용 방법
$('#datePicker').datepicker({
format: "yyyy-mm-dd", //데이터 포맷 형식(yyyy : 년 mm : 월 dd : 일 )
startDate: '-10d', //달력에서 선택 할 수 있는 가장 빠른 날짜. 이전으로는 선택 불가능 ( d : 일 m : 달 y : 년 w : 주)
... //생략
language : "ko" //달력의 언어 선택, 그에 맞는 js로 교체해줘야한다.
})//여기까지가 기본 사용 방법
.on("changeDate", function(e) {
//이벤트의 종류
//show : datePicker가 보이는 순간 호출
//hide : datePicker가 숨겨지는 순간 호출
//clearDate: clear 버튼 누르면 호출
//changeDate : 사용자가 클릭해서 날짜가 변경되면 호출 (개인적으로 가장 많이 사용함)
//changeMonth : 월이 변경되면 호출
//changeYear : 년이 변경되는 호출
//changeCentury : 한 세기가 변경되면 호출 ex) 20세기에서 21세기가 되는 순간
console.log(e);// 찍어보면 event 객체가 나온다.
//간혹 e 객체에서 date 를 추출해야 하는 경우가 있는데
// e.date를 찍어보면 Thu Jun 27 2019 00:00:00 GMT+0900 (한국 표준시)
// 위와 같은 형태로 보인다.
// 추후에 yyyy-mm-dd 형태로 변경하는 코드를 업로드 하겠습니다.
}
3. Methods 를 써서 값을 변경하거나 가지고 오는 방법
Methods — bootstrap-datepicker documentation
Methods are called on a datepicker by calling the datepicker function with a string first argument, followed by any arguments the method takes destroy Arguments: None Remove the datepicker. Removes attached events, internal attached objects, and added HTML
bootstrap-datepicker.readthedocs.io
사용 방법이 쉬워서 필요할 때마다 도큐먼트를 보고 사용하는게 빠릅니다.
bootstrap datepicker 사용법에 대한 정리글 끝
추가 링크
yyyy-mm-dd 포맷의 날짜 원하는 일(월,년)수 만큼 계산 후 yyyy-mm-dd 포맷으로 반환해주는 함수
Javascript 날짜 변경 함수(yyyy-mm-dd) - 개발자 삽질 일기
부트스트랩 datepicker를 사용하다 DB에 날짜를 조회하러 가다보면 날짜를 변경해서 가야하는 경우가 종종 있다. 부트스트랩 데이트피커, bootstrap datepicker 사용법 - 개발자 삽질 일기 사용할 bootstrap-datep..
programmer93.tistory.com