[bootstrap-datepicker]_부트스트랩 데이트 피커 설치,운용

사용목적

 

프론트를 개발하면서 달력을 표출해야 하는 경우가 많습니다.
이때 달력을 쉽게 그리고, 옵션을 부여할 수 있는 bootstrap-datepicker 플러그인 을 사용하여 쉽게 그릴 수 있습니다

---

설치

 

공식 git 주소인 아래의 주소에 접속합니다.

https://github.com/uxsolutions/bootstrap-datepicker/tree/master/dist

GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs)

CSS 폴더에서 bootstrap-datepicker.css 를 다운로드

js 폴더에서 bootstrap-datepicker.js 를 다운로드 합니다.

 

한국어 버전 설치시

locale 폴더에서 bootstrap-datepicker.ko.min,js 파일을 다운로드 합니다.

---

<script>

<script   src="/resources/web/js/jquery-3.4.1.min.js" type="text/javascript"></script>


<script   type="text/javascript" src="/resources/web/js/datapicker/bootstrap-datepicker.js"></script>        <!--datepicker 사용시 필수 // core  -->
<script   type="text/javascript" src="/resources/web/js/datapicker/bootstrap-datepicker.ko.js"></script>     <!--datepicker 사용시 필수 // 한국어 -->
<link href="/resources/web/css/bootstrap-datepicker.css" rel="stylesheet" type="text/css">

 

script 순서는 jquery 가 먼저 읽혀지고 그 뒤에 datepicker 가 와야 합니다.

---

온라인 테스트

아래의 링크에서 온라인으로 모듈을 돌려 볼 수 있습니다.

 

https://uxsolutions.github.io/bootstrap-datepicker/?markup=input&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=auto&multidate=&multidateSeparator=&keyboardNavigation=on&forceParse=on#sandbox 

Datepicker for Bootstrap

---

기본 설정

html -> datepicker 로 사용될 input element를 생성하고 bootstrap 의 "form-control" 클래스를 부여합니다.

script -> 해당 element 를 선택하고 .datepicker() 를 이용하여 데이트 피커를 생성, 옵션을 부여합니다.

 

공식문서

https://bootstrap-datepicker.readthedocs.io/en/latest/index.html

bootstrap-datepicker — bootstrap-datepicker documentation

 

위의 문서에서 option 에 해당하는 부분은 아래와 같은 양식으로 작성합니다.

("#datepicker").datepicker({
	format: "yyyy-mm-dd", // 데이터 포멧 형식
    startDate : "+7d" // 시작일 7일뒤부터 가능 이전 날자는 선택 불가
    language : "ko" // 달력 언어 선택
    daysOfWeekDisabled : [0,6] // 0 :일 ,1 :월 ... 6: 토 에 대한 날자 선택 불가 옵션

})

option 설정의 경우 datepicker 의 모습,css적인 부분, 커스터마이징에 관련이 있고,

 

이벤트를 부여( 클릭과 같은 ) 시 아래와 같이 .on 뒤에 이벤트 명과 함께 이벤트를 작성하면 됩니다.

$('.datepicker').datepicker()
    .on(picker_event, function(e) {
        // `e` here contains the extra attributes
    });

picker_event 부분에 공식문서에서의 event 종류에 맞춰 적용 시킬 수 있습니다.

---

자주 사용하는 기본 예시

("#datepicker").datepicker({
	format: "yyyy-mm-dd", // 데이터 포멧 형식
    startDate : "+7d" // 시작일 7일뒤부터 가능 이전 날자는 선택 불가
    language : "ko" // 달력 언어 선택
    daysOfWeekDisabled : [0,6] // 0 :일 ,1 :월 ... 6: 토 에 대한 날자 선택 불가 옵션

}).on("changeDate",function(e){ // 데이트 피커 선택날자 변경시 이벤트 감지
	console.log($(this).val()); // 해당엘리먼트의 값 출력
})

추가적으로 설정 할 때 script 에서 다음과 같이 옵션을 페이지 별로 부여할 수 있습니다.

$('#datepicker').datepicker('setStartDate', '+7d').datepicker('setDaysOfWeekDisabled', [0,6]);

 

이렇게 쉽고 간단한 bootstrap-datepicker를 알아보았습니다.

감사합니다.