jquerycssstylesbootstrap-datepicker

Bootstrap Datepicker - Custom Styles

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):

enter image description here

Solution

  • 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.