减小 bootstrap-datepicker 字段的大小并更改文本颜色 [英] Reduce size and change text color of the bootstrap-datepicker field

问题描述

基于 HTML5/JQuery 在 Web 视图中启动的 Android 应用程序编程，我使用的是 Eternicode 的引导程序日期选择器.顺便说一句，我正在使用 Jquery 1.9.1 和 Bootstrap 2.3.2 和 bootstrap-responsive.

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

• 选择器主题不受尊重，某些日期无法读取(见附图).一些存在css冲突，例如日期选择器的字体在白色背景上显示为白色.
• 我无法减小日期选择器字段的大小，例如它只保留一行.

我的标记代码是:

<label id="dateId" class="span6">一个日期</label><div id="datePurchase" class="input-append date"><input data-format="yyyy-MM-dd" type="text"/><span class="附加组件"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>

我通过 Javascript 初始化日期选择器:

 $("#dateId").datetimepicker({选择时间:假，格式:日/月/年"，开始日期:开始日期，结束日期:结束日期，自动关闭:真});$("#dateId").on("changeDate", onChangeDate);

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

解决方案

通过覆盖 DateTimePicker .bootstrap-datetimepicker-widget 班级.

通过 javascript 当日期选择器的显示事件被触发时，我会覆盖 onShowDatePicker() 函数中的 CSS:

$("#myDateControl").datetimepicker({选择时间:假，格式:日/月/年"，开始日期:开始日期，结束日期:结束日期，自动关闭:真});$dateItem.on("changeDate", onChangeDate);$dateItem.on("show", onShowDatePicker);}函数 onShowDatePicker(event){如果(事件){//覆盖日期选择器的背景颜色，例如文本可读$(".bootstrap-datetimepicker-widget").css("background-color", "#3c3e43");}}

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:

• the picker theme is not respected and some dates are not readable (see the attached picture). Some there is css conflict such as the datepicker's font is displayed white on white background.
• I'm not able to reduce the size of the date picker field such as it holds on alone row.

My markup code is:

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

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

解决方案

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

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

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