3

编写基于 HTML5/JQuery 在 web 视图中启动的 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 初始化日期选择器：

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

你对这些问题有什么想法吗？非常感谢

4

1 回答 1

2

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

当触发日期选择器的 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");
    }    
}
于 2013-11-08T09:51:20.930 回答