I´m using the Bootstrap 3 DateTime picker from www.github/Eonasdan/bootstrap-datetimepicker

Everything is working fine, except that I need to use small fonts and less spacing between the calendar grid lines.

Does anyone has an idea on how to do it. This is the original code:

<div class="small">
    <div id="myPlaceholder"></div>
</div>

And on Javascript:

 $('#myPlaceholder').datetimepicker({
                language : 'en'
            });

It works well, but does not show small fonts.

I´m using the Bootstrap 3 DateTime picker from www.github./Eonasdan/bootstrap-datetimepicker

Everything is working fine, except that I need to use small fonts and less spacing between the calendar grid lines.

Does anyone has an idea on how to do it. This is the original code:

<div class="small">
    <div id="myPlaceholder"></div>
</div>

And on Javascript:

 $('#myPlaceholder').datetimepicker({
                language : 'en'
            });

It works well, but does not show small fonts.

• javascript
• css
• twitter-bootstrap
• datetimepicker

Share Improve this question Follow edited Mar 18, 2015 at 21:52 amphetamachine 30.7k1212 gold badges6868 silver badges7474 bronze badges asked Jan 14, 2015 at 1:06 MendesMendes 18.6k3838 gold badges166166 silver badges282282 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You only need to add your own CSS to style the date picker.

This will make the columns narrower:

.bootstrap-datetimepicker-widget td.day {
    width: 200px;
}

This will make the rows shorter:

.bootstrap-datetimepicker-widget td.day {
    line-height: 10px;
}

This makes the font smaller for the day numbers:

.bootstrap-datetimepicker-widget td.day {
    font-size: 10px;
}

And bining them all:

.bootstrap-datetimepicker-widget td.day {
    width: 200px;
    line-height: 10px;
    font-size: 10px;
}

And as a bonus, this will make the font size of the day of week smaller:

th.dow {
    font-size: 12px;
}