两个内联Bootstrap日期选择器不适合自举网格列和面板

时间:2016-01-11 13:50:48

标签: angularjs datepicker angular-ui-bootstrap

说到前端,我是新手。我一直在研究一个小页面angularjs应用程序,我遇到了一个问题。在我的页面上,我需要两个内联日期选择器。我选择了angular-ui-bootstrap datepickers。它们以奇怪的方式互相遮掩:

veiling datepickers

这是我的HTML代码的一部分:

localStorage


你知道如何在没有遮盖物的情况下使它们正常贴合面板吗?
在我将日期选择器放入面板div之前,显示问题是一样的。它们紧固在一起而不适合网格柱。
每位帮助将不胜感激

1 个答案:

答案 0 :(得分:2)

由于<uib-datepicker>具有固定大小且无法根据网格宽度调整大小,因此您可以自定义小按钮的大小(天)。 请参阅.custom-size .btn-sm CSS类下面的代码段:

var app = angular.module('app', ['ui.bootstrap']);
app.controller('MyCtrl', function($scope) {

});
.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS UI Bootstrap</title>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="app.js"></script>
</head>

<body ng-controller="MyCtrl">

  <div class="container-fluid">
<h2>AngularJS: UI Bootstrap datepicker</h2>

<div class="row">
  <div class="col-md-6">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4>Date range</h4>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-6">
            <div style="display: inline-block;">
              <uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false" class="custom-size"></uib-datepicker>
            </div>
            <div>
              <label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
            </div>
          </div>
          <div class="col-md-6">
            <div style="display: inline-block;">
              <uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
            </div>
            <div>
              <label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-6">
    <label> Additional Info</label>
  </div>
</div>
  </div>

</body>

</html>