Angularjs 两个内联引导日期选择器不适合引导网格列和面板
说到前端,我是个新手。我一直在开发一个单页angularjs应用程序,我遇到了一个问题。在我的页面上,我需要两个内联日期选择器。我选择了AngularUI引导日期选择器。它们以一种奇怪的方式相互遮掩: 以下是我的HTML代码的一部分:Angularjs 两个内联引导日期选择器不适合引导网格列和面板,angularjs,datepicker,angular-ui-bootstrap,Angularjs,Datepicker,Angular Ui Bootstrap,说到前端,我是个新手。我一直在开发一个单页angularjs应用程序,我遇到了一个问题。在我的页面上,我需要两个内联日期选择器。我选择了AngularUI引导日期选择器。它们以一种奇怪的方式相互遮掩: 以下是我的HTML代码的一部分: <div class="row"> <div class="col-md-6"> <div class="panel panel-default"> <div class="pan
<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-5">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-5 ">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false"></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>
日期范围
日期自{dateFrom | Date:“dd/MM/yyyy”}
日期至{dateTo | Date:“dd/MM/yyyy”}
附加信息
你知道如何在不戴面纱的情况下使它们正常安装在面板上吗?
在我将日期选择器放入panel div之前,显示问题是相同的。它们被拧紧在一起,没有安装网格柱。
我们非常感谢您的每项帮助因为
具有固定的大小,并且不能根据网格宽度调整大小,您可以自定义小按钮的大小(天)。
请参见下面的代码段中的.custom size.btn sm
CSS类:
var-app=angular.module('app',['ui.bootstrap']);
应用程序控制器('MyCtrl',函数($scope){
});代码>
.custom size.btn sm{
填充:4px8px;
字体大小:11px;
线高:1.5;
边界半径:3px;
}
AngularJS UI引导程序
AngularJS:UI引导数据采集器
日期范围
日期自{dateFrom | Date:“dd/MM/yyyy”}
日期至{dateTo | Date:“dd/MM/yyyy”}
附加信息
Hi,这对我的应用程序来说不是一个好的解决方案,因为由于上部面板的大小,面板的颜色宽度必须等于6。更改datepickers面板的宽度会导致UI看起来不整洁。更重要的是,当我使用你的解决方案时,我不得不将日期选择器的col大小更改为8,以确保它们不会相互遮掩。如果不重新设计整个用户界面,我就无法完成这项任务。@cAMPy:我编辑了我的答案,修改了datepicker迷你按钮的原始大小。检查是否适合你。