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

Posted by Lisarien on Stack Overflow See other posts from Stack Overflow or by Lisarien
Published on 2013-10-16T13:20:54Z Indexed on 2013/11/08 9:55 UTC
Read the original article Hit count: 345

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.

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery