CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker
Lisarien
Lisarien

Reputation: 1136

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

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:

datepicker with display issue

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

Upvotes: 3

Views: 12927

Answers (1)

Lisarien
Lisarien

Reputation: 1136

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");
    }    
}

Upvotes: 2

Related Questions