CSS와 JS를 사용하는 방법은 다음과 같습니다.
CDN 사용
bootstrap-datepicker - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
A datepicker for Bootstrap forked from Stefan Petre's (of eyecon.ro), improvements by eternicode - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 b
cdnjs.com
간단히 링크를 확인 후 아래와 같이 바로 사용합니다.
<!-- datepicker 는 jquery 1.7.1 이상 bootstrap 2.0.4 이상 버전이 필요함 --
<!-- jqeruy 로드 후 datepicker를 로드-->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"/></script>
<!--한글-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.ko.min.js"/></script>
직접 파일을 받아서 사용하고 싶으신 경우 아래의 링크에서 다운을 받습니다.
GitHub - uxsolutions/bootstrap-datepicker: A datepicker for twitter bootstrap (@twbs)
A datepicker for twitter bootstrap (@twbs). Contribute to uxsolutions/bootstrap-datepicker development by creating an account on GitHub.
github.com
다운로드 클릭
아래의 파일을 찾아 적절한 곳에 넣고 사용합니다.
<!-- datepicker 는 jquery 1.7.1 이상 bootstrap 2.0.4 이상 버전이 필요함 --
<!-- jquery 로드 후 datepicker를 로드-->
<script src="resources/lib/jquery/js/jquery-3.2.1.js"></script>
<script src="resources/lib/datepicker-1.9.0/bootstrap-datepicker.js"/></script>
<!--한글-->
<script src="resources/lib/datepicker-1.9.0/bootstrap-datepicker.ko.min.js"/></script>
1. 기본 사용 방법
<!-- 우선 body 부분에 input tag를 하나 만들어준다. -->
<body>
<!-- 시작시 기본 날짜 설정은 value를 이용 -->
<input type="text" id="datePicker" class="form-control" value="2022-12-15">
</body>
2. 폼 컨트롤을 이용한 버튼 포함
i 태그에 해당되는 이미지를 넣으시면 됩니다 저는 fontawesome을 사용했습니다.
<div class="input-group">
<input type="text" id="startDate" class="form-control datepicker" placeholder="시작날짜">
<label class="input-group-text" for="startDate" ><i class="fa-solid fa-calendar" ></i></label>
</div>
3. 스크립트 부분
아래와 같이 간단하게 설정을 합니다.
<script>
$(function(){
$('.datepicker').datepicker({ //클래스로 datepicker 적용
startDt: new Date('2022'),
calendarWeeks: false,
todayHighlight: true,
autoclose: true,
format: "yyyy-mm-dd",
language: "ko"
});
});
</script>
설정에 관한 내용을 정리했습니다.
<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 : ['2022-10-10','2022-11-11'],//특정 일 선택불가로 설정, 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를 추가해야함
});
});
</script>구현하면 다음과 같습니다.
위에 설명한 것처럼 한글로 설정하면 다음과 같이 됩니다.
간단하게 설정하는 부분입니다.
$(function(){
$('.datepicker').datepicker({
}).datepicker("setEndDate", new Date());;
//종료 날짜를 오늘 날짜로 선언하여 현재일로부터 다음일부터 선택 불가.
});
오늘 날짜를 기준으로 선택이 안되게 됩니다.
다음으로 다른 글에서 datepicker의 사용법에 대해 조금 더 다뤄보도록 하겠습니다.
감사합니다.
'프로그래밍 > 스프링[Spring]' 카테고리의 다른 글
| [JQuery] 태그 속성 값 가져오기 (0) | 2022.12.15 |
|---|---|
| [Spring] Datepicker 사용시 Mybatis 에서 날짜 기간 검색(Mysql) (0) | 2022.12.14 |
| [Bootstrap] 모달창 영역 밖 선택시 닫힘 방지 (0) | 2022.12.09 |
| [Eclipse] FileNotFoundException 에러 (액세스 거부) (0) | 2022.02.24 |
| [javaScript] formData 확인하기(console.log로 안보이는 경우) (0) | 2022.02.24 |
