Web/Bootstrap

Bootstrap 4 달력 : datetimepicker (Bootstrap 3버전 업그레이드 버전) 인기 달력

saltdoll 2020. 1. 15. 08:46
반응형

Bootstrap 3에서 가장 인기 있는 달력이라면,

단연 Eonasdan 라이브러리 달력을 최고로 손꼽습니다.

해당 Bootstrap 3 Date/Time Picker v4.17.47까지 나와 있습니다. (01/14/2020)

Bootstrap 3 Datapicker 모습

 

진행 중인 프로젝트에 Bootstrap 4를 사용하게 되었는데,

과거 Eonasdan Date Picker가 Bootstrap 4를 지원을 하지 않게 되어서,

Bootstrap 4에 지원되는 Date Picker가 필요하게 되었답니다.

Bootstrap 4에 완전하게 지원되는 Date Picker인 Tempus Dominus를 찾게 되었죠.

Tempus DominusEonasdan 라이브러리의 업그레이드된 버전이죠.

 

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>

Bootstrap 4 Datepicker화면

추가로, [달력 그림 버튼]을 추가를 위해서 Awesome font를 추가해 줘야 합니다.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" />

 

모든 부분에서 최대한 과거 버전을 사용했던 사람이 쉽게 이해하고 사용할 수 있게 만들어 주었습니다.

 

날짜만 나오게 하는 방식의 소스 코드는 약간 변경되었네요.

날짜와 시작일 끝일 Linked 처리

아래 소스와 같이 { 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방식을 선호하는 편입니다.)

  1. Acquire jQuery
  2. Acquire Moment.js
  3. Acquire
<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>

 

 

 

반응형
도움이 되셨다면 하트모양의 "♡ 공감"을 눌러주시면 큰 격려가 됩니다.
(로그인하지 않으셔도 가능)