减小引导日期标记字段的大小和更改文本颜色 [英] Reduce size and change text color of the bootstrap-datepicker field

问题描述

编写基于HTML5 / JQuery的Android应用程序，在Web视图中启动，我使用Eternicode的引导日期戳。
BTW我使用Jquery 1.9.1和Bootstrap 2.3.2与引导响应。

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:

• 选择器主题不受尊重，某些日期不可读（请参阅附图）。有些有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：

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

推荐答案

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

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

通过javascript，当日期选择程序的显示事件触发时我覆盖了 onShowDatePicker（）函数中的CSS：

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

这篇关于减小引导日期标记字段的大小和更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！