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

Question

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

选择器工作正常，但不幸的是我遇到了两个我目前无法解决的问题:

• 选择器主题不受尊重，有些日期不可读(见附图)。有些有css冲突，比如日期选择器的字体在白底上显示为白色。
• 我无法减小日期选择器字段的大小，因为它只占一行。

我的标记代码是:

<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 初始化日期选择器:

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

你知道这些问题吗？ 非常感谢

Answer 1

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

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