CODEWITHSUNDEEP
jquerycssstylesbootstrap-datepicker
Anonymous
Anonymous

Reputation: 103

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

Upvotes: 3

Views: 13707

Answers (2)

Soubhagya Kumar Barik
Soubhagya Kumar Barik

Reputation: 2595

To override existing datepicker CSS please use the below CSS.

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

enter image description here

Upvotes: 0

s.kuznetsov
s.kuznetsov

Reputation: 15213

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.

Upvotes: 1

Related Questions