JQuery DateTimePicker 更改大小

Question

I am trying to modify the JQuery DateTimePicker (extension/modification of DatePicker) size.

I have attached my attempt (which does not work).

.ui-datetimepicker {
font-size:100px;
border: 1px solid #555;
}

Thanks.

Answer 1

So that is this one: https://www.jqueryscript.net/time-clock/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker.html , right?

using https://codepen.io/ptahume/pen/KKoyqMG

The HTML that it generates looks like

<div class="xdsoft_datetimepicker" style="display: block; left: 8px; top: 211.4px;"><div class="xdsoft_datepicker active"><div class="xdsoft_mounthpicker"><button type="button" class="xdsoft_prev"></button><div class="xdsoft_label xdsoft_month">July</div><div class="xdsoft_label xdsoft_year">2022</div><button type="button" class="xdsoft_next"></button></div><div class="xdsoft_calendar"><table><thead><tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr></thead><tbody><tr><td data-date="26" data-month="5" data-year="2022" class="  xdsoft_other_month   "><div>26</div></td><td data-date="27" data-month="5" data-year="2022" class="  xdsoft_other_month   "><div>27</div></td><td data-date="28" data-month="5" data-year="2022" class="  xdsoft_other_month   "><div>28</div></td><td data-date="29" data-month="5" data-year="2022" class="  xdsoft_other_month   "><div>29</div></td><td data-date="30" data-month="5" data-year="2022" class="  xdsoft_other_month   "><div>30</div></td><td data-date="1" data-month="6" data-year="2022" class="    "><div>1</div></td><td data-date="2" data-month="6" data-year="2022" class="    "><div>2</div></td></tr><tr><td data-date="3" data-month="6" data-year="2022" class="    "><div>3</div></td><td data-date="4" data-month="6" data-year="2022" class="    "><div>4</div></td><td data-date="5" data-month="6" data-year="2022" class="    "><div>5</div></td><td data-date="6" data-month="6" data-year="2022" class="    "><div>6</div></td><td data-date="7" data-month="6" data-year="2022" class="    "><div>7</div></td><td data-date="8" data-month="6" data-year="2022" class="    "><div>8</div></td><td data-date="9" data-month="6" data-year="2022" class="    "><div>9</div></td></tr><tr><td data-date="10" data-month="6" data-year="2022" class="    "><div>10</div></td><td data-date="11" data-month="6" data-year="2022" class="    "><div>11</div></td><td data-date="12" data-month="6" data-year="2022" class="    "><div>12</div></td><td data-date="13" data-month="6" data-year="2022" class="    "><div>13</div></td><td data-date="14" data-month="6" data-year="2022" class="    "><div>14</div></td><td data-date="15" data-month="6" data-year="2022" class="    "><div>15</div></td><td data-date="16" data-month="6" data-year="2022" class="    "><div>16</div></td></tr><tr><td data-date="17" data-month="6" data-year="2022" class="    "><div>17</div></td><td data-date="18" data-month="6" data-year="2022" class="    "><div>18</div></td><td data-date="19" data-month="6" data-year="2022" class="    "><div>19</div></td><td data-date="20" data-month="6" data-year="2022" class="    "><div>20</div></td><td data-date="21" data-month="6" data-year="2022" class="    "><div>21</div></td><td data-date="22" data-month="6" data-year="2022" class="    "><div>22</div></td><td data-date="23" data-month="6" data-year="2022" class="    "><div>23</div></td></tr><tr><td data-date="24" data-month="6" data-year="2022" class="    "><div>24</div></td><td data-date="25" data-month="6" data-year="2022" class="    "><div>25</div></td><td data-date="26" data-month="6" data-year="2022" class="    "><div>26</div></td><td data-date="27" data-month="6" data-year="2022" class="    "><div>27</div></td><td data-date="28" data-month="6" data-year="2022" class="   xdsoft_current  xdsoft_today "><div>28</div></td><td data-date="29" data-month="6" data-year="2022" class="    "><div>29</div></td><td data-date="30" data-month="6" data-year="2022" class="    "><div>30</div></td></tr><tr><td data-date="31" data-month="6" data-year="2022" class="    "><div>31</div></td><td data-date="1" data-month="7" data-year="2022" class="  xdsoft_other_month   "><div>1</div></td><td data-date="2" data-month="7" data-year="2022" class="  xdsoft_other_month   "><div>2</div></td><td data-date="3" data-month="7" data-year="2022" class="  xdsoft_other_month   "><div>3</div></td><td data-date="4" data-month="7" data-year="2022" class="  xdsoft_other_month   "><div>4</div></td><td data-date="5" data-month="7" data-year="2022" class="  xdsoft_other_month   "><div>5</div></td><td data-date="6" data-month="7" data-year="2022" class="  xdsoft_other_month   "><div>6</div></td></tr></tbody></table></div></div><div class="xdsoft_timepicker active"><button type="button" class="xdsoft_prev"></button><div class="xdsoft_time_box"><div class="xdsoft_scrollbar"><div class="xdsoft_scroller" style="height: 10px;"></div></div><div class="xdsoft_time_variant" style="margin-top: -2px;"><div class=" " data-hour="0" data-minute="0">00:00</div><div class=" " data-hour="1" data-minute="0">01:00</div><div class=" " data-hour="2" data-minute="0">02:00</div><div class=" " data-hour="3" data-minute="0">03:00</div><div class=" " data-hour="4" data-minute="0">04:00</div><div class=" " data-hour="5" data-minute="0">05:00</div><div class=" " data-hour="6" data-minute="0">06:00</div><div class=" " data-hour="7" data-minute="0">07:00</div><div class=" " data-hour="8" data-minute="0">08:00</div><div class=" " data-hour="9" data-minute="0">09:00</div><div class=" " data-hour="10" data-minute="0">10:00</div><div class=" " data-hour="11" data-minute="0">11:00</div><div class=" " data-hour="12" data-minute="0">12:00</div><div class=" " data-hour="13" data-minute="0">13:00</div><div class=" " data-hour="14" data-minute="0">14:00</div><div class=" " data-hour="15" data-minute="0">15:00</div><div class=" " data-hour="16" data-minute="0">16:00</div><div class=" " data-hour="17" data-minute="0">17:00</div><div class=" " data-hour="18" data-minute="0">18:00</div><div class=" " data-hour="19" data-minute="0">19:00</div><div class=" " data-hour="20" data-minute="0">20:00</div><div class=" " data-hour="21" data-minute="0">21:00</div><div class="  xdsoft_current " data-hour="22" data-minute="0">22:00</div><div class=" " data-hour="23" data-minute="0">23:00</div></div></div><button type="button" class="xdsoft_next"></button></div></div>

as there doesn't seem to be much on the site for customisable support id try and target the class's on the divs you want to alter, also there is a style:'', option on default options but the documentation dosnt say how to use this, hopefully this will give you a starting point, if not try adding a https://stackoverflow.com/help/minimal-reproducible-example