twitter-bootstrap 具有自定义主题的引导程序 3 日期选择器 - 看起来很讨厌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27308644/
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
bootstrap 3 datepicker with custom theme - nasty looking
提问by cardinalPilot
I bought one of the custom Metro themes that was part of the John Papa AngularJS/Breeze courses on Pluralsight. Everything goes well until I tried to add a Bootstrap 3 date picker to the mix. Right out of the box, it looks nasty.
我购买了一个自定义 Metro 主题，它是 Pluralsight 上 John Papa AngularJS/Breeze 课程的一部分。一切都很顺利，直到我尝试将 Bootstrap 3 日期选择器添加到组合中。开箱即用，看起来很讨厌。
Note that the font-awesome icon is a couple of pixels smaller than the input box and that the popup has varying column widths and these weird borders and no background etc., etc.
请注意，字体真棒图标比输入框小几个像素，并且弹出窗口具有不同的列宽和这些奇怪的边框，没有背景等。
<div class="col-xs-6">
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="{{vm.dateFormat}}"
ng-model="vm.startDate"
is-open="vm.openedStart"
max-date="{{vm.endDate | date: 'yyyy-MM-dd'}}"
datepicker-options="{{vm.dateOptions}}"
ng-required="true"
show-button-bar="false"
show-weeks="false" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.openStart($event)"><i class="fa fa-calendar"></i></button>
</span>
</div>
</div>
I seem to have this problem whenever I try and use a custom bootstrap style that I've downloaded, so I'm obviously missing something fundamental in how custom style sets work.
每当我尝试使用我下载的自定义引导程序样式时，我似乎都会遇到这个问题，所以我显然缺少自定义样式集如何工作的一些基本知识。
So given that I have a custom style, how do I go about resetting the style of the datepicker so it looks much more 'default'? Obviously, I have to hunt down the CSS for it, and I have a customtheme.css file, but there's not much in there for the .ui-datepicker class and definately nothing that ever explains why are lines through the calendar.
因此，鉴于我有自定义样式，我该如何重置日期选择器的样式，使其看起来更“默认”？显然，我必须为它寻找 CSS，并且我有一个 customtheme.css 文件，但是 .ui-datepicker 类中的内容并不多，而且绝对没有任何内容可以解释为什么日历中会有线条。
Can anyone give me some advice or some pointers and how to clean this up (the icon and the calendar layout), or more generally, how to clean up gremlins when using custom themes?
任何人都可以给我一些建议或一些指示以及如何清理它（图标和日历布局），或者更一般地说，如何在使用自定义主题时清理小鬼？
回答by Phoenix
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap datepicket demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
<style>
.datepicker-dropdown {
top: 0;
left: 0;
padding: 4px;
background-color: #2C6E8E;
border-radius: 10px;
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.datepicker table tr td,
.datepicker table tr th {
text-align: center;
width: 30px;
height: 30px;
border-radius: 4px;
border: none;
color: #FFFFFF;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
background: #555555;
cursor: pointer;
}
.datepicker table tr td.old,
.datepicker table tr td.new {
color: #FF8000;
}
.datepicker table tr td.today {
color: #000000;
background-color: #FFA953;
border-color: #FFB76F;
}
.datepicker table tr td.today:hover {
color: #FFFFFF;
background-color: #884400;
border-color: #f59e00;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.open > .dropdown-toggle.datepicker table tr td.active,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted {
color: #ffffff;
background-color: #419841;
border-color: #285e8e;
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus {
color: #ffffff;
background-color: #285e8e;
border-color: #193c5a;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.open > .dropdown-toggle.datepicker table tr td.active,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted {
color: #ffffff;
background-color: #3071a9;
border-color: #285e8e;
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active:hover,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active:focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.focus,
.open > .dropdown-toggle.datepicker table tr td.active.highlighted.focus {
color: #ffffff;
background-color: #285e8e;
border-color: #193c5a;
}
.datepicker .datepicker-switch {
width: 145px;
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
background: #50A2C9;
}
</style>
<script type='text/javascript'>
$(function(){
$('.input-group.date').datepicker({
orientation: "auto left",
forceParse: false,
autoclose: true,
todayHighlight: true,
toggleActive: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>Custom datepicker</h1>
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</body>
</html>Hope this will help you and also check this Linkfor reference.
希望这会对您有所帮助，并检查此链接以供参考。
回答by Saqueib
I had similar issue and it fixed by adding this class in dateOptions
我有类似的问题，它通过在 dateOptions
vm.dateOptions = {
class: 'datepicker'
};
css
css
.datepicker .btn-default {
border-width: 0;
box-shadow: none;
}
this will disable the shadowof button and get rid of borders
这将禁用shadow按钮并摆脱边框
