Bootstrap 3에서 가장 인기 있는 달력이라면,
단연 Eonasdan 라이브러리 달력을 최고로 손꼽습니다.
해당 Bootstrap 3 Date/Time Picker v4.17.47까지 나와 있습니다. (01/14/2020)
진행 중인 프로젝트에 Bootstrap 4를 사용하게 되었는데,
과거 Eonasdan Date Picker가 Bootstrap 4를 지원을 하지 않게 되어서,
Bootstrap 4에 지원되는 Date Picker가 필요하게 되었답니다.
Bootstrap 4에 완전하게 지원되는 Date Picker인 Tempus Dominus를 찾게 되었죠.
Tempus Dominus은 Eonasdan 라이브러리의 업그레이드된 버전이죠.
Tempus Dominus 라이브러리: https://tempusdominus.github.io/bootstrap-4/
Tempus Dominus - Bootstrap 4
Tempus Dominus Tempus Dominus is the successor to the very popular Eonasdan/bootstrap-datetimepicker. The plugin provide a robust date and time picker designed to integrate into your Bootstrap project. Currently v5.0.1
tempusdominus.github.io
Tempus Dominus v5.0.1이 현재까지는 최신 버전이네요.(01/14/2020)
기존 방식보다, 더 간단하게 적용하면 되는데요.
[ CDN 방식 ]
CDN 방식은 다음의 링크를 넣어주면 됩니다.
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
</head>
추가로, [달력 그림 버튼]을 추가를 위해서 Awesome font를 추가해 줘야 합니다.
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />
모든 부분에서 최대한 과거 버전을 사용했던 사람이 쉽게 이해하고 사용할 수 있게 만들어 주었습니다.
날짜만 나오게 하는 방식의 소스 코드는 약간 변경되었네요.
아래 소스와 같이 { format: 'L'}을 넣어주면, 날짜만 나오게 됩니다. (=시간 표시 제거)
<div class='col-md-3 col-xs-4'>
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" value="01/11/2020">
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class='col-md-3 col-xs-4'>
<div class="form-group">
<div class="input-group date" id="datetimepicker2" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" value="01/15/2020">
<div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
...
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'L'});
$('#datetimepicker2').datetimepicker({
format: 'L',
useCurrent: false
});
$("#datetimepicker1").on("change.datetimepicker", function (e) {
$('#datetimepicker2').datetimepicker('minDate', e.date);
});
$("#datetimepicker2").on("change.datetimepicker", function (e) {
$('#datetimepicker1').datetimepicker('maxDate', e.date);
});
});
</script>
[ 수동설치 ]
수동 설치로는 jQuery, Moment.js, tempusdominus-bootstrap-4.min.js를 추가해 주면 됩니다.
(개인적으로 CDN방식을 선호하는 편입니다.)
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/moment.js"></script>
<script type="text/javascript" src="/path/to/tempusdominus-bootstrap-4.min.js"></script>
'Web > Bootstrap' 카테고리의 다른 글
| Bootstrap를 이용한 마우스 오버시 Tooltip 설명 나오는 예제 (0) | 2021.02.04 |
|---|---|
| Bootstrap 4에서 svg 아이콘 사용하기 (0) | 2018.12.05 |
| Bootstrap 4 Display 유틸리티 - table columns 을 hide 처리하기 (0) | 2018.11.30 |
| Bootstrap 토글 접기 Collapsible collapse 기능 (0) | 2017.08.23 |
| Bootstrap 반응형 테이블 FooTable (Plug In) 검색/페이지네이션 추가됨 (0) | 2017.08.17 |
| jQuery Bootgrid 간편한 그리드 표시 (페이지네이션, 검색 기능 PlugIn) (0) | 2017.07.22 |
| Bootstrap Table Grid sort 처리 - Datatables (0) | 2017.03.09 |
| Bootstrap 스크롤된 페이지 위로 올라가기 ( Back to Top ) (0) | 2016.12.29 |
(로그인하지 않으셔도 가능)