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

Posted 2023-05-07

【中文标题】减小 bootstrap-datepicker 字段的大小并更改文本颜色

【英文标题】：Reduce size and change text color of the bootstrap-datepicker field

【发布时间】：2013-10-24 15:19:30

【问题描述】：

编写基于 html5/JQuery 在 Web 视图中启动的 android 应用程序，我使用的是 Eternicode 的 bootstrap-datepicker。 顺便说一句，我正在使用 Jquery 1.9.1 和 Bootstrap 2.3.2 和 bootstrap-responsive。

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

选择器主题不受尊重，某些日期无法读取（参见附图）。有些是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 初始化日期选择器：

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

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

【问题讨论】：

最后，我已经能够通过使用日期输入标签上的属性大小来减小大小，结果是：size="12" />

不幸的是，我还不能更改日历视图中的文本颜色。将颜色强制为黑色不起作用：style="color:black;" />

【参考方案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");
        

【讨论】：

第 10 行有一个不平衡的括号。