목차
bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class
부트스트랩 4에서는 기존의 datepicker가 작동하지 않는다.
그렇다고 bootstrap을 마이너그레이션을 하기도 애매하다.
부트스트랩 4에 적용이 가능한 데이트 피커는 tempusdominus가 거의 유일하다.
좀 더 커스터마이징을 하려면 필스 라이브러리인 moments.js도 건드려야 하지만, 일단은 tempusdominus가 그리는 calendar의 class와 html element 구조만 알아도 대략적인 스타일링은 가능하다.
하지만 유감스럽게도 데이터피커를 멈추고 돔을 탐색하기가 쉽지 않다.
시간이 없어서 일단 그냥 tempusdominus datepicker widget의 html 코드를 올려둔다.
참고해서 도움이 되기를...
<div class="datepicker">
<div class="datepicker-days" style="">
<table class="table table-sm">
<thead>
<tr>
<th class="prev" data-action="previous"><span class="fa fa-chevron-left"
title="Previous Month"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Month">09 2019</th>
<th class="next" data-action="next"><span class="fa fa-chevron-right" title="Next Month"></span>
</th>
</tr>
<tr>
<th class="dow">Sun</th>
<th class="dow">Mon</th>
<th class="dow">Tue</th>
<th class="dow">Wed</th>
<th class="dow">Thu</th>
<th class="dow">Fri</th>
<th class="dow">Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td data-action="selectDay" data-day="09/01/2019" class="day weekend">1</td>
<td data-action="selectDay" data-day="09/02/2019" class="day">2</td>
<td data-action="selectDay" data-day="09/03/2019" class="day">3</td>
<td data-action="selectDay" data-day="09/04/2019" class="day">4</td>
<td data-action="selectDay" data-day="09/05/2019" class="day active today">5</td>
<td data-action="selectDay" data-day="09/06/2019" class="day">6</td>
<td data-action="selectDay" data-day="09/07/2019" class="day weekend">7</td>
</tr>
<tr>
<td data-action="selectDay" data-day="09/08/2019" class="day weekend">8</td>
<td data-action="selectDay" data-day="09/09/2019" class="day">9</td>
<td data-action="selectDay" data-day="09/10/2019" class="day">10</td>
<td data-action="selectDay" data-day="09/11/2019" class="day">11</td>
<td data-action="selectDay" data-day="09/12/2019" class="day">12</td>
<td data-action="selectDay" data-day="09/13/2019" class="day">13</td>
<td data-action="selectDay" data-day="09/14/2019" class="day weekend">14</td>
</tr>
<tr>
<td data-action="selectDay" data-day="09/15/2019" class="day weekend">15</td>
<td data-action="selectDay" data-day="09/16/2019" class="day">16</td>
<td data-action="selectDay" data-day="09/17/2019" class="day">17</td>
<td data-action="selectDay" data-day="09/18/2019" class="day">18</td>
<td data-action="selectDay" data-day="09/19/2019" class="day">19</td>
<td data-action="selectDay" data-day="09/20/2019" class="day">20</td>
<td data-action="selectDay" data-day="09/21/2019" class="day weekend">21</td>
</tr>
<tr>
<td data-action="selectDay" data-day="09/22/2019" class="day weekend">22</td>
<td data-action="selectDay" data-day="09/23/2019" class="day">23</td>
<td data-action="selectDay" data-day="09/24/2019" class="day">24</td>
<td data-action="selectDay" data-day="09/25/2019" class="day">25</td>
<td data-action="selectDay" data-day="09/26/2019" class="day">26</td>
<td data-action="selectDay" data-day="09/27/2019" class="day">27</td>
<td data-action="selectDay" data-day="09/28/2019" class="day weekend">28</td>
</tr>
<tr>
<td data-action="selectDay" data-day="09/29/2019" class="day weekend">29</td>
<td data-action="selectDay" data-day="09/30/2019" class="day">30</td>
<td data-action="selectDay" data-day="10/01/2019" class="day new">1</td>
<td data-action="selectDay" data-day="10/02/2019" class="day new">2</td>
<td data-action="selectDay" data-day="10/03/2019" class="day new">3</td>
<td data-action="selectDay" data-day="10/04/2019" class="day new">4</td>
<td data-action="selectDay" data-day="10/05/2019" class="day new weekend">5</td>
</tr>
<tr>
<td data-action="selectDay" data-day="10/06/2019" class="day new weekend">6</td>
<td data-action="selectDay" data-day="10/07/2019" class="day new">7</td>
<td data-action="selectDay" data-day="10/08/2019" class="day new">8</td>
<td data-action="selectDay" data-day="10/09/2019" class="day new">9</td>
<td data-action="selectDay" data-day="10/10/2019" class="day new">10</td>
<td data-action="selectDay" data-day="10/11/2019" class="day new">11</td>
<td data-action="selectDay" data-day="10/12/2019" class="day new weekend">12</td>
</tr>
</tbody>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" data-action="previous"><span class="fa fa-chevron-left"
title="Previous Year"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Year">2019</th>
<th class="next" data-action="next"><span class="fa fa-chevron-right" title="Next Year"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span data-action="selectMonth" class="month">Jan</span><span
data-action="selectMonth" class="month">Feb</span><span data-action="selectMonth"
class="month">Mar</span><span data-action="selectMonth" class="month">Apr</span><span
data-action="selectMonth" class="month">May</span><span data-action="selectMonth"
class="month">Jun</span><span data-action="selectMonth" class="month">Jul</span><span
data-action="selectMonth" class="month">Aug</span><span data-action="selectMonth"
class="month active">Sep</span><span data-action="selectMonth" class="month">Oct</span><span
data-action="selectMonth" class="month">Nov</span><span data-action="selectMonth"
class="month">Dec</span></td>
</tr>
</tbody>
</table>
</div>
<div class="datepicker-years" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" data-action="previous"><span class="fa fa-chevron-left"
title="Previous Decade"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Decade">2010-2019
</th>
<th class="next" data-action="next"><span class="fa fa-chevron-right" title="Next Decade"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span data-action="selectYear" class="year old">2009</span><span
data-action="selectYear" class="year">2010</span><span data-action="selectYear"
class="year">2011</span><span data-action="selectYear" class="year">2012</span><span
data-action="selectYear" class="year">2013</span><span data-action="selectYear"
class="year">2014</span><span data-action="selectYear" class="year">2015</span><span
data-action="selectYear" class="year">2016</span><span data-action="selectYear"
class="year">2017</span><span data-action="selectYear" class="year">2018</span><span
data-action="selectYear" class="year active">2019</span><span data-action="selectYear"
class="year old">2020</span></td>
</tr>
</tbody>
</table>
</div>
<div class="datepicker-decades" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev" data-action="previous"><span class="fa fa-chevron-left"
title="Previous Century"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5">2000-2090</th>
<th class="next" data-action="next"><span class="fa fa-chevron-right" title="Next Century"></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span data-action="selectDecade" class="decade old"
data-selection="2006">1990</span><span data-action="selectDecade" class="decade"
data-selection="2006">2000</span><span data-action="selectDecade" class="decade active"
data-selection="2016">2010</span><span data-action="selectDecade" class="decade"
data-selection="2026">2020</span><span data-action="selectDecade" class="decade"
data-selection="2036">2030</span><span data-action="selectDecade" class="decade"
data-selection="2046">2040</span><span data-action="selectDecade" class="decade"
data-selection="2056">2050</span><span data-action="selectDecade" class="decade"
data-selection="2066">2060</span><span data-action="selectDecade" class="decade"
data-selection="2076">2070</span><span data-action="selectDecade" class="decade"
data-selection="2086">2080</span><span data-action="selectDecade" class="decade"
data-selection="2096">2090</span><span data-action="selectDecade" class="decade old"
data-selection="2106">2100</span></td>
</tr>
</tbody>
</table>
</div>
</div>
반응형
'Dev > bootstrap' 카테고리의 다른 글
| bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css (0) | 2021.07.19 |
|---|---|
| Bootstrap 4 Carousel : 자동 재생 중지 방법 부트스트랩 슬라이더 (0) | 2021.07.02 |
| 부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker (0) | 2021.01.16 |
| 드롭다운 사용을 위한 popper.js 다운로드 for bootstrap 4.3 dropdown components (0) | 2020.10.21 |
| 부트스트랩4 데이트피커 datepicker 이벤트 가로채기 / 제이쿼리 toggle()이용해서 게시물 목록 정렬 버튼 토글하기 (0) | 2020.03.24 |
댓글