素材
<div class="bootstrap-datetimepicker-widget timepicker-sbs" style="display: block;"><div class="row"><div class="datepicker col-md-6"><div class="datepicker-days" style="display: block;"><table class="table-condensed"><thead><tr><th class="prev" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Previous Month"></span></th><th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Month">December 2017</th><th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Month"></span></th></tr><tr><th class="dow">Su</th><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th></tr></thead><tbody><tr><td data-action="selectDay" data-day="11/26/2017" class="day old weekend">26</td><td data-action="selectDay" data-day="11/27/2017" class="day old">27</td><td data-action="selectDay" data-day="11/28/2017" class="day old">28</td><td data-action="selectDay" data-day="11/29/2017" class="day old">29</td><td data-action="selectDay" data-day="11/30/2017" class="day old">30</td><td data-action="selectDay" data-day="12/01/2017" class="day">1</td><td data-action="selectDay" data-day="12/02/2017" class="day weekend">2</td></tr><tr><td data-action="selectDay" data-day="12/03/2017" class="day weekend">3</td><td data-action="selectDay" data-day="12/04/2017" class="day">4</td><td data-action="selectDay" data-day="12/05/2017" class="day">5</td><td data-action="selectDay" data-day="12/06/2017" class="day">6</td><td data-action="selectDay" data-day="12/07/2017" class="day">7</td><td data-action="selectDay" data-day="12/08/2017" class="day">8</td><td data-action="selectDay" data-day="12/09/2017" class="day weekend">9</td></tr><tr><td data-action="selectDay" data-day="12/10/2017" class="day weekend">10</td><td data-action="selectDay" data-day="12/11/2017" class="day">11</td><td data-action="selectDay" data-day="12/12/2017" class="day">12</td><td data-action="selectDay" data-day="12/13/2017" class="day">13</td><td data-action="selectDay" data-day="12/14/2017" class="day">14</td><td data-action="selectDay" data-day="12/15/2017" class="day">15</td><td data-action="selectDay" data-day="12/16/2017" class="day weekend">16</td></tr><tr><td data-action="selectDay" data-day="12/17/2017" class="day weekend">17</td><td data-action="selectDay" data-day="12/18/2017" class="day">18</td><td data-action="selectDay" data-day="12/19/2017" class="day">19</td><td data-action="selectDay" data-day="12/20/2017" class="day">20</td><td data-action="selectDay" data-day="12/21/2017" class="day active today">21</td><td data-action="selectDay" data-day="12/22/2017" class="day">22</td><td data-action="selectDay" data-day="12/23/2017" class="day weekend">23</td></tr><tr><td data-action="selectDay" data-day="12/24/2017" class="day weekend">24</td><td data-action="selectDay" data-day="12/25/2017" class="day">25</td><td data-action="selectDay" data-day="12/26/2017" class="day">26</td><td data-action="selectDay" data-day="12/27/2017" class="day">27</td><td data-action="selectDay" data-day="12/28/2017" class="day">28</td><td data-action="selectDay" data-day="12/29/2017" class="day">29</td><td data-action="selectDay" data-day="12/30/2017" class="day weekend">30</td></tr><tr><td data-action="selectDay" data-day="12/31/2017" class="day weekend">31</td><td data-action="selectDay" data-day="01/01/2018" class="day new">1</td><td data-action="selectDay" data-day="01/02/2018" class="day new">2</td><td data-action="selectDay" data-day="01/03/2018" class="day new">3</td><td data-action="selectDay" data-day="01/04/2018" class="day new">4</td><td data-action="selectDay" data-day="01/05/2018" class="day new">5</td><td data-action="selectDay" data-day="01/06/2018" class="day new weekend">6</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="glyphicon glyphicon-chevron-left" title="Previous Year"></span></th><th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Year">2017</th><th class="next" data-action="next"><span class="glyphicon glyphicon-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">Sep</span><span data-action="selectMonth" class="month">Oct</span><span data-action="selectMonth" class="month">Nov</span><span data-action="selectMonth" class="month active">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="glyphicon glyphicon-chevron-left" title="Next Decade"></span></th><th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Decade">2012-2023</th><th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Previous Decade"></span></th></tr></thead><tbody><tr><td colspan="7"><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 active">2017</span><span data-action="selectYear" class="year">2018</span><span data-action="selectYear" class="year">2019</span><span data-action="selectYear" class="year">2020</span><span data-action="selectYear" class="year">2021</span><span data-action="selectYear" class="year">2022</span><span data-action="selectYear" class="year">2023</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="glyphicon glyphicon-chevron-left" title="Previous Century"></span></th><th class="picker-switch" data-action="pickerSwitch" colspan="5">1999-2099</th><th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Century"></span></th></tr></thead><tbody><tr><td colspan="7"><span data-action="selectDecade" class="decade" data-selection="2005">2000 - 2011</span><span data-action="selectDecade" class="decade" data-selection="2017">2012 - 2023</span><span data-action="selectDecade" class="decade" data-selection="2029">2024 - 2035</span><span data-action="selectDecade" class="decade" data-selection="2041">2036 - 2047</span><span data-action="selectDecade" class="decade" data-selection="2053">2048 - 2059</span><span data-action="selectDecade" class="decade" data-selection="2065">2060 - 2071</span><span data-action="selectDecade" class="decade" data-selection="2077">2072 - 2083</span><span data-action="selectDecade" class="decade" data-selection="2089">2084 - 2095</span><span data-action="selectDecade" class="decade" data-selection="2101">2096 - 2107</span><span></span><span></span><span></span></td></tr></tbody></table></div></div><div class="timepicker col-md-6"><div class="timepicker-picker"><table class="table-condensed"><tbody><tr><td><a href="#" tabindex="-1" title="Increment Hour" class="btn" data-action="incrementHours"><span class="glyphicon glyphicon-chevron-up"></span></a></td><td class="separator"></td><td><a href="#" tabindex="-1" title="Increment Minute" class="btn" data-action="incrementMinutes"><span class="glyphicon glyphicon-chevron-up"></span></a></td><td class="separator"></td></tr><tr><td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">10</span></td><td class="separator">:</td><td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">22</span></td><td><button class="btn btn-primary" data-action="togglePeriod" tabindex="-1" title="Toggle Period">AM</button></td></tr><tr><td><a href="#" tabindex="-1" title="Decrement Hour" class="btn" data-action="decrementHours"><span class="glyphicon glyphicon-chevron-down"></span></a></td><td class="separator"></td><td><a href="#" tabindex="-1" title="Decrement Minute" class="btn" data-action="decrementMinutes"><span class="glyphicon glyphicon-chevron-down"></span></a></td><td class="separator"></td></tr></tbody></table></div><div class="timepicker-hours" style="display: none;"><table class="table-condensed"><tbody><tr><td data-action="selectHour" class="hour">12</td><td data-action="selectHour" class="hour">01</td><td data-action="selectHour" class="hour">02</td><td data-action="selectHour" class="hour">03</td></tr><tr><td data-action="selectHour" class="hour">04</td><td data-action="selectHour" class="hour">05</td><td data-action="selectHour" class="hour">06</td><td data-action="selectHour" class="hour">07</td></tr><tr><td data-action="selectHour" class="hour">08</td><td data-action="selectHour" class="hour">09</td><td data-action="selectHour" class="hour">10</td><td data-action="selectHour" class="hour">11</td></tr></tbody></table></div><div class="timepicker-minutes" style="display: none;"><table class="table-condensed"><tbody><tr><td data-action="selectMinute" class="minute">00</td><td data-action="selectMinute" class="minute">05</td><td data-action="selectMinute" class="minute">10</td><td data-action="selectMinute" class="minute">15</td></tr><tr><td data-action="selectMinute" class="minute">20</td><td data-action="selectMinute" class="minute">25</td><td data-action="selectMinute" class="minute">30</td><td data-action="selectMinute" class="minute">35</td></tr><tr><td data-action="selectMinute" class="minute">40</td><td data-action="selectMinute" class="minute">45</td><td data-action="selectMinute" class="minute">50</td><td data-action="selectMinute" class="minute">55</td></tr></tbody></table></div></div></div></div>
下载这两个文件