CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrap
Marcus
Marcus

Reputation: 6717

Change text or background color of bootstraps date picker

I have implemented the bootstrap date picker (see figure below). It's working as intended. The code look like this:

<div class="input-group date">
    <input name="departure" type="text" class="form-control" id="departure" required>
    <span class="input-group-addon">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
</div>

The code for implementing the date picker:

$(document).ready(function () {
    $('.input-group.date').datepicker({
        format: "yyyy/mm/dd",
        startDate: "2014-12-01",
        endDate: "2016-01-01",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true
    });
});

Date picker:

dtp

When I change the background color of my HTML page like this:

body {
    background: #EDEDED !important; /* RGB Decimal :237, 237, 237 */
    color: #965B25 !important; /* RGB Decimal :150, 91, 37 */
}

The text in the date picker is also changed. The result of this is that you can not read any text inside the date picker box. Is there a way to change the text color/background color of the date picker itself?

Any help is greatly appriciated.

Marcus

Upvotes: 2

Views: 31626

Answers (2)

Shravan Ramamurthy
Shravan Ramamurthy

Reputation: 4096

The same issue i faced for Bootstrap3 datetimepicker and i did the below change and it worked 

  $('.datepicker').on(
        'dp.show',
        function(e) {
        $(".bootstrap-datetimepicker-widget").css(
        "background-color", "#3c3e43");
        });

Upvotes: 0

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

try this:

.datepicker {
background-color: #fff ;
color: #333 ;
}

Upvotes: 5

Related Questions