How to define specific color for Bootstrap datetimepicker

user_10621443 0
Viewed 265

Issue

I have two different projects both using bootstrap-datetimepicker. In one project, the color is correct. In the other one, the color is wrong. Here is my HTML.

<div class="form-group">
  <label for="StartDate">From</label>
  <input required id="StartDate" type="text" placeholder="Start Date" class="form-control input-xlarge mydatetime">
</div>

Code

Here is my code.

$('.mydatetime').datetimepicker({
  language:'en',
  format: 'yyyy-mm-dd hh:ii:ss',
  autoclose: true,
  todayBtn: true,
  minuteStep:5,
  pickerPosition: "bottom-right"
});

Both projects use exact the same way to use datetimepicker as shown above but show different results. I tried to change css locally by adding the following lines in the css file with no help.

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

Does anyone have idea what might go wrong here? Thanks a lot.

datetimepicker css html
3 Answers

In datetimepicker dates and months take body default color. SO you have to add below code in your css.

.mydatetime td, .mydatetime th {
    color: #333;
}
user_121229280

To change the background color and font-color of datepicker do this.

.mydatetime{
   background: #333;
   border: 1px solid #555;
   color: #EEE;
}
user_109155340 
.ui-datepicker .ui-widget-content {
  background: #999 none;
}
user_118123500
Related