Bootstrap Datepicker - Custom Styles

Asked 26/4, 2021 at 11:4 Answered 5/4, 2022 at 3:45

Solved jquery css styles bootstrap-datepicker

I am using Bootstrap Datepicker within my application (See: https://bootstrap-datepicker.readthedocs.io/en/latest/index.html) and have set it up to work as seen below. I have no code issues and the datepicker works as expected, however, I wish to change the styling of the plugin. Instead of editing the default stylesheet and colours, so that the active day is no longer display in the default blue, is there an alternative method to customise the CSS of the active day? I have reviewed the documentation in-depth but cannot seem to find anything of use.

<head>
<link rel="stylesheet" href="/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
</head>

<div class="form-group mb-0" id="bootstrap-datepicker">
<input class="form-control" type="text" data-provide="datepicker" id="startDate" name="StartDate" value="">
</div>

<script src="/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script>
$('#bootstrap-datepicker input').datepicker({
                format: "dd/mm/yyyy",
                toggleActive: true,
                todayBtn: "linked",
                changeMonth: true,
                changeYear: true
            });
</script>

Boostrap Datepicker (based on the code above):

Exhaustless answered 26/4, 2021 at 11:4 Comment(0)

You need to override the style of the selected date. To do this, refer to the td.active selector, which by default contains these rules:

color
background-color
border-color
text-shadow

Further, assign any parameters instead of the current ones, using !important, and insert them into your css. For example:

td.active {
    color: unset!important;
    background-color: unset!important;
    border-color: unset!important;
    text-shadow: unset;
}

In the example, I turned off all the rules of the selector for the selected day, but you can leave any rule that you need turned on. To do this, simply do not specify the desired rule in the overridden selector.

Obliquity answered 26/4, 2021 at 13:16 Comment(0)

To override existing datepicker CSS please use the below CSS.

.datepicker td,th{
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
}

Coherence answered 5/4, 2022 at 3:45 Comment(0)

Recommended topics

Hot tags