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

Question

Programing an Android application based on HTML5/JQuery launching in a web view, I'm using the Eternicode's bootstrap-datepicker. BTW I'm using Jquery 1.9.1 and Bootstrap 2.3.2 with bootstrap-responsive.

The picker is working fine but unfortunately I get yet two issues which I was not able to solve at this time:

• the picker theme is not respected and some dates are not readable (see the attached picture). Some there is css conflict such as the datepicker's font is displayed white on white background.
• I'm not able to reduce the size of the date picker field such as it holds on alone row.

My markup code is:

<div class="row-fluid" style="margin-right:0px!important">
  <label id="dateId" class="span6">One Date</label>
  <div id="datePurchase" class="input-append date">
    <input data-format="yyyy-MM-dd" type="text" />
    <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
    </span>
  </div>
</div>

I init the datepicker by Javascript:

    $("#dateId").datetimepicker({
        pickTime: false,
        format: "dd/MM/yyyy",
        startDate: startDate,
        endDate: endDate,
        autoclose: true
    });
    $("#dateId").on("changeDate", onChangeDate);

Do you get any idea about these issues? Thanks very much

Answer 1

I've been able to solve my issue with text non readable by overwriting the background color of the DateTimePicker .bootstrap-datetimepicker-widget class.

By javascript when the date picker's show event is fired then I overwrite the CSS in the onShowDatePicker() function:

$("#myDateControl").datetimepicker({
        pickTime: false,
        format: "dd/MM/yyyy",
        startDate: startDate,
        endDate: endDate,
        autoclose: true
    });
    $dateItem.on("changeDate", onChangeDate);
    $dateItem.on("show", onShowDatePicker);
    }

function onShowDatePicker(event)
{
    if(event) {
        //overwrite the backbground color of the date picker such as the text is readable
        $(".bootstrap-datetimepicker-widget").css("background-color", "#3c3e43");
    }    
}