说到前端,我是新手。我一直在研究一个小页面angularjs应用程序,我遇到了一个问题。在我的页面上,我需要两个内联日期选择器。我选择了angular-ui-bootstrap datepickers。它们以奇怪的方式互相遮掩:
这是我的HTML代码的一部分:
localStorage
你知道如何在没有遮盖物的情况下使它们正常贴合面板吗?
在我将日期选择器放入面板div之前,显示问题是一样的。它们紧固在一起而不适合网格柱。
每位帮助将不胜感激
答案 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>