css - 带有自定义主题的 bootstrap 3 datepicker

css - 带有自定义主题的 bootstrap 3 datepicker - 看起来很讨厌

转载作者：行者123 更新时间：2023-11-28 11:36:29

我购买了一个自定义 Metro 主题，它是 Pluralsight 上 John Papa AngularJS/Breeze 类(class)的一部分。一切顺利，直到我尝试将 Bootstrap 3 日期选择器添加到组合中。开箱即用，看起来很讨厌。

enter image description here

请注意，超棒的字体图标比输入框小几个像素，弹出窗口具有不同的列宽和这些奇怪的边框，没有背景等等。

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

每当我尝试使用我下载的自定义 Bootstrap 样式时，我似乎都会遇到这个问题，所以我显然缺少自定义样式集工作原理的一些基本知识。

既然我有自定义样式，我该如何重置日期选择器的样式，使其看起来更“默认”？显然，我必须为它寻找 CSS，并且我有一个 customtheme.css 文件，但其中没有太多关于 .ui-datepicker 类的内容，而且肯定没有任何内容可以解释为什么行会穿过日历。

任何人都可以给我一些建议或指示，以及如何清理它(图标和日历布局)，或者更一般地说，如何在使用自定义主题时清理 gremlins？

最佳答案

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

希望这对您有所帮助，并查看此 Link供引用。

关于css - 带有自定义主题的 bootstrap 3 datepicker - 看起来很讨厌，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27308644/

文章推荐： javascript - 什么是readyState和status？

文章推荐： html - 将三个 div 类放入同一行

文章推荐： javascript - 如何使用正则表达式从此字符串获取电子邮件

文章推荐： ios - Swift:谷歌登录后转到其他 View Controller

c++ - Netbeans 讨厌 nullptr 但仍然工作正常
我看到过关于此的类似帖子，但无法让 Netbeans 在正常工作时停止在我的代码中显示错误消息 "Unable to resolve identifier nullptr"。我已正确启用 C++11，
php - 讨厌 reCAPTCHA - CakePHP Captcha 替代品？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
ruby-on-rails - Cucumber 和/或 Webrat 讨厌？
我有一个 cucumber 步骤，最近开始失败时已添加到我的布局中。如果我拿出来，我的测试都通过了。当我把它放回去时，使用 WebRat 提供的 click_link 方法
.net - WCF 客户端(添加服务引用)讨厌 WebGet 和 WebInvoke ...真的，它确实如此
我一直致力于创建独立于 .Net 客户端运行的 WCF 服务。感谢 Google 和 StackOverflow，我已经能够创建简单的 xml 和 json 服务，而无需 Soap 包装器和一堆我不需
python - Ubuntu + virtualenv = 一团糟？ virtualenv 讨厌 dist-packages，想要 site-packages
有人可以向我解释一下 python 在 ubuntu 9.04 中发生了什么吗？我正在尝试启动 virtualenv，而 --no-site-packages 标志似乎对 ubuntu 没有任何作用

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 带有自定义主题的 bootstrap 3 datepicker - 看起来很讨厌