부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker

부트스트랩을 사용하면 여러 편리함이 있는데 그중에서도 드롭다운, 데이터 피커 같은 것을 쓰기가 굉장히 쉽다.

그런데 부트스트랩 4.3으로 업그레이드를 하면, 기존에 부트스트랩으로 작성했던 스타일이 흐트러진다.

그중에서도 특히 datepicker는 최악이다.

또한 부트스트랩 4.3에서는 더 이상 글리피콘을 지원하지 않는다.

글리피콘이 유료화된 탓이다.

기존의 부트스트랩 데이터 피커를 그대로 사용했다면, 클래스 명을 변경해 주고 글리피콘 대신 :before 선택자로 이미지 캘린더를 달아 주면 된다.

꽤 비슷한 화면이 나왔다.

html markup은 다음과 같다.

<li class="datePicker2">
  <span class="input-group date"><input type="text" class="form-control"><span
  class="input-group-append"><span class="input-group-text">
  <i class="datePicker-calendar"></i>
  </span></span></span>
  -
  <span class="input-group date"><input type="text" class="form-control"><span
  class="input-group-append"><span class="input-group-text">
  <i class="datePicker-calendar"></i>
  </span></span></span>
</li>

달라진 점은 input-group-addon 대신에 input-group-append을 사용했다.

또한 캘린더 아이콘이 뿌려지던 <i>태그에서 글리 피콘 클래스를 제거하고 새로 클래스를 만들어 넣었다.

/* datepicker */
.input-group-addon,.input-group-text {
    border-left: 0 none;
    padding: 4px 9px 4px 9px;
}

.input-group-addon .glyphicon-calendar:before, .input-group-text .datePicker-calendar:before{
    content: " ";
    background: url(/assets/images/buttons/btn_calendar.png) center center no-repeat;
    width: 18px;
    height: 18px;
    display: block;
    overflow: hidden;
}

위 css에서 중요한 부분은 백그라운드로 달력 이미지를 넣어 준 것뿐이다.

나머지 스타일은 사이트 스타일 기조에 맞게 수정한 것뿐이다.

검스 각선미