twitter-bootstrap 减小 bootstrap-datepicker 字段的大小并更改文本颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19404620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reduce size and change text color of the bootstrap-datepicker field
提问by Lisarien
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.
在 Web 视图中启动基于 HTML5/JQuery 的 Android 应用程序编程，我使用的是 Eternicode 的 bootstrap-datepicker。顺便说一句，我使用 Jquery 1.9.1 和 Bootstrap 2.3.2 与引导响应。
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.
- 选择器主题不受尊重，某些日期不可读（见附图）。有些存在 css 冲突，例如日期选择器的字体在白色背景上显示为白色。
- 我无法减小日期选择器字段的大小，例如它保留在单独的行上。
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:
我通过 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
你对这些问题有什么想法吗？非常感谢
采纳答案by Lisarien
I've been able to solve my issue with text non readable by overwriting the background color of the DateTimePicker .bootstrap-datetimepicker-widgetclass.
通过覆盖 DateTimePicker.bootstrap-datetimepicker-widget类的背景颜色，我已经能够解决文本不可读的问题。
By javascript when the date picker's show event is fired then I overwrite the CSS in the onShowDatePicker()function:
通过 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");
}
}
