Angular-UI手风琴+ Datepicker?

时间:2014-05-04 17:26:56

标签: angularjs twitter-bootstrap-3 angular-ui angular-ui-bootstrap

我使用Anguar-Ui Bootstrap http://angular-ui.github.io/bootstrap/

我实施了"手风琴"来自Angular UI,现在我想从Angular UI中添加这个Accordeon的Popup DatePicker。 问题是,如果我点击日期中的Accordeon它打开弹出窗口,以便我可以选择日期,但它在Accordeon中打开此弹出窗口。是否有可能在Accordion窗口外打开此弹出窗口? “折叠式窗口”为小型以显示整个日期选择器。

我希望你明白我的意思..

代码看起来像这样,datePicker的控制器与Angular UI示例中的控制器相同:

<accordion close-others="oneAtATime">

<accordion-group heading="Filter">

<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</accordion-group>

</accordion>    

编辑:好的,我已经解决了这个问题我必须只添加&#34; datepicker-append-to-body =&#34; true&#34;&#34;现在它有效..

1 个答案:

答案 0 :(得分:1)

以下是完整代码,使用Angular UI中使用的示例,显示了设置datepicker-append-to-body="true"的位置

<div ng-controller="datePickerController" >
    <div class="row">
        <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-append-to-body="true" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>
</div>

修改在第5行,在input元素