CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapdatepicker
Alexis_user
Alexis_user

Reputation: 425

Bootstrap datepicker : text not legible; How to change background color?

I use bootstrap-datepicker3 from a gem, his Github of bootstrap datepicker

But I use a black bootstrap theme and I don't know how to isolate or change the background color of the datepicker window... It seems to take the background color of the main bootstrap theme.

<div class="form-group">
  <div class="col-lg-10">
    <span class="input-group-addon">Dates</span>
    <div class="input-group" id="datepicker">
      <input class="form-control" type="text" name="date_start" data-behaviour='datepicker'>
      <span class="input-group-addon">à</span>
      <input class="form-control" type="text" name="date_end" data-behaviour='datepicker'>
    </div>
  </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('[data-behaviour~=datepicker]').datepicker();
    });
</script>

Example

I tried a solution but it's for datetimepicker and it doesn't work..

Thank you !

Upvotes: 2

Views: 6373

Answers (3)

Dave F
Dave F

Reputation: 903

I was able to resolve this issue by following the steps provided in the following thread, with one change. I used the ".datepicker .table-condensed" selector.

Reduce size and change text color of the bootstrap-datepicker field

Upvotes: 0

Alexis_user
Alexis_user

Reputation: 425

Try this

  <style type="text/css">
      .datepicker.dropdown-menu table  {
          background-color: #FFFFFF;
      }
  </style>

it works !

Upvotes: 3

NicoFerna
NicoFerna

Reputation: 613

Try overriding the background-color in your CSS:

.datepicker.dropdown-menu {
  background-color:#FFF;
}

Upvotes: 3

Related Questions