Angularjs 两个内联引导日期选择器不适合引导网格列和面板

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

说到前端,我是个新手。我一直在开发一个单页angularjs应用程序,我遇到了一个问题。在我的页面上,我需要两个内联日期选择器。我选择了AngularUI引导日期选择器。它们以一种奇怪的方式相互遮掩:

以下是我的HTML代码的一部分:

<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迷你按钮的原始大小。检查是否适合你。