Bootsrap DatePicker 기본 셋팅

환경 : SpringBoot + thymeleaf

DatePicker가 부트스트랩버전은 묘하게 함수같은 것들이 달라서 정리할 필요가 있을거 같아 정리함.

html영역

<!-- CSS 로드 -->
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" href="../../css/bootstrap.css" />
 
<!-- bootsrap DatePicker CSS -->
<link rel="stylesheet" th:href="@{/css/bootstrap-datepicker3.css}" href="../../css/bootstrap-datepicker3.css">
<!-- 스크립트 로드 -->
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.bundle.min.js"></script>
<!-- bootsrap DatePicker Script -->
<script src="../../js/bootstrap-datepicker.js"></script>
<script src="../../js/bootstrap-datepicker.kr.min.js"></script>
 
.....생략.....
 
<!-- DatePicker input -->
<input type="text" id="visitDate" name="visitDate" class="form-control datePicker" readonly>
<label class="calendar-icon" target="visitDate"></label>

script영역

//DatePicker 생성
$("#visitDate").datepicker({
    format: "yyyy-mm-dd(D)",
    calendarWeeks: false,               //몇째주인지 표시
    autoclose: true,                    //자동 닫히기
    todayHighlight: false,              //오늘 날짜 하이라이트
    language: "kr",                     //언어
    daysOfWeekDisabled: "1,2,3,4,5,6",  //일요일 제외 선택 불가하게
    useCurrent: false,
    endDate: new Date()                 //선택 가능 범위
    }).on('changeDate', function(e){    //날짜 변경 이벤트
    });
 
//달력아이콘 click 이벤트
$('.calendar-icon').click(function(){
    var target = $(this).attr("target");
    $("#" + target).datepicker().focus();
});

css영역

.datePicker{
    pointer-events: none;
}

label.calendar-icon {
    position: absolute;
    display: inline-block;
    top: 7px;
    right: 10px;
    width: 30px;
    height: 25px;
    border: none;
    background: url('../../image/calendar_icon.png') no-repeat;
    background-size: 23px 23px;
    cursor: pointer;
}

실행결과(다른 css가 포함되어 있기 때문에 스타일이 다를 수도 있음)

input은 readonly로 셋팅 후, 마우스 포인트를 css를 이용해 없앴다.

그리고 라벨 아이콘을 클릭 시 DatePicker가 열리도록 셋팅.

input을 입력 받지 않은 이유는 유효성 체크를 하기 귀찮아서이다.