✈ bootstrap4 datepicker tempusdominus style css 수정을 위한 달력 element dom class

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>