css - AngularStrap 日期选择器看起来很奇怪

Question

我正在尝试按照 AngularDart getting started guide 上的说明在我的元素中使用 AngularStrap 日期选择器。功能很好，但外观不佳。即使没有加载我自己的样式表，外观也不是应该的样子。这两个屏幕截图应该可以说明问题:

它应该是怎样的:

它的实际外观:

应用程序是用 yeoman.io 搭建的

bower.json 配置:

{
  "name": "myapp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.14",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "jquery": "~1.10.2",
    "bootstrap": "~3.1.0",
    "angular-resource": "1.2.14",
    "angular-cookies": "1.2.14",
    "angular-sanitize": "1.2.14",
    "angular-route": "1.2.14",
    "moment": "~2.5.1",
    "angular-strap": "~2.0.0",
    "angular-motion": "~0.3.2",
    "angular-animate": "~1.2.14"
  },
  "devDependencies": {
    "angular-mocks": "1.2.14",
    "angular-scenario": "1.2.14"
  },
  "resolutions": {
    "angular": "1.2.14"
  }
}

相关的 index.html 片段:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.min.css" />
...
<link rel="stylesheet" href="styles/style.css"/>
....
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>

html中的datepicker输入标签:

<input type="text" class="form-control" ng-model="selectedDate" name="date" data-date-format="dd-MM-yyyy" data-start-view="2" bs-datepicker>

Answer 1

您需要添加以下样式:

.datepicker.dropdown-menu {
  width: 250px;
  height: 250px;
  button {
    outline: none;
    border: 0px;
  }
  tbody {
    height: 180px;
  }
  tbody button {
    padding: 6px;
  }
  &.datepicker-mode-1, &.datepicker-mode-2 {
    tbody button {
      height: 65px;
    }
  }
}

.timepicker.dropdown-menu {
  padding: 0 4px;
  button {
    outline: none;
    border: 0px;
  }
  tbody button {
    padding: 6px;
  }
}

请注意，这是 less/sass 格式的。如果您需要直接的 css，请先转换它 here .

这是一个 angular-strap 问题，其中 mgcrea 提供了这个需要的 css:https://github.com/mgcrea/angular-strap/issues/398 .

基本上，您只需要删除按钮边框和轮廓并添加一些间距，它看起来就像在 angular-strap 页面上一样。