缩小大小并更改bootstrap-datepicker字段的文本颜色

Question

在Web视图中编写基于HTML5 / JQuery启动的Android应用程序，我正在使用Eternicode的bootstrap-datepicker。 顺便说一句，我正在使用Jquery 1.9.1和Bootstrap 2.3.2以及自举响应。

选择器工作正常，但不幸的是我还有两个问题，我目前无法解决这个问题：

• 选择器主题不受尊重，某些日期不可读（参见附图）。有些存在css冲突，例如datepicker的字体在白色背景上显示为白色。
• 我无法缩小日期选择器字段的大小，例如单独行上的日期。

我的标记代码是：

<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>

我通过Javascript初始化datepicker：

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

您对这些问题有任何了解吗？ 非常感谢

Answer 1

通过覆盖DateTimePicker .bootstrap-datetimepicker-widget类的背景颜色，我已经能够通过不可读的文本解决我的问题。

当日期选择器的show事件被触发时，通过javascript，我在onShowDatePicker()函数中覆盖CSS：

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