AngularStrap datepicker看起来很奇怪

我正在尝试在我的项目中使用AngularStrap datepicker,方法是遵循AngularDart入门指南中 的说明功能很好,但看起来很不对劲.即使没有我自己的样式表加载,外观也不应该是它应该是什么.这两个截图应该澄清问题:

应该如何看待:

它看起来如何:

该应用程序是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代码段:

...

....

html中的datepicker输入标记:

Planky.. 17

您需要添加以下样式:

.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;
  }
}

请注意,这是少/ sass格式.如果您需要直接css,请先在此处进行转换.

这是一个角度带问题,其中mgcrea提供了这个所需的css:https://github.com/mgcrea/angular-strap/issues/398.

基本上,你只需要删除按钮边框和轮廓并添加一些间距,它就像在角度带页面上一样.

您需要添加以下样式:

.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;
  }
}

请注意,这是少/ sass格式.如果您需要直接css,请先在此处进行转换.

这是一个角度带问题,其中mgcrea提供了这个所需的css:https://github.com/mgcrea/angular-strap/issues/398.

基本上,你只需要删除按钮边框和轮廓并添加一些间距,它就像在角度带页面上一样.