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

python - Vagrant 起来 : InsecurePlatformWarning
我正在尝试执行 vagrant up 但一直遇到此错误: ==> default: IOError: [Errno 13] Permission denied: '/usr/local/lib/pyt
html - 如何让不同高度的html div float 起来
我在容器 div 中有一系列动态创建的不同高度的 div。 Varying text... Varying text... Varying text... Varying text.
Vagrant 起来 : bad interpreter: No such file or directory
通过 cygwin 运行 vagrant up 时遇到以下错误。 stderr: /bin/bash: /home/vagrant/.ansible/tmp/ansible-tmp-14872260
有了这个开源项目，不会 Web 开发也能让数据“动”起来！
今天要向小伙伴们介绍的是一个能够快速地把数据制作成可视化、交互页面的 Python 框架：Streamlit，分分钟让你的数据动起来！犹记得我在做机器学习和数据分析方面的毕设时，
vagrant - vb.customize 'storageattach' 第一次挂载我的磁盘，但在 vagrant pause 后更改丢失； Vagrant 起来
我是 vagrant 的新手，正在尝试将第二个磁盘添加到我正在用 vagrant 制作的虚拟机中。我想出了如何在第一次启动虚拟机时连接磁盘，但是当我关闭机器时然后再次备份(使用 'vagrant

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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