Angular-UI Accordion + Datepicker?

2
votes

i use Anguar-Ui Bootstrap http://angular-ui.github.io/bootstrap/

and i have implemented the "Accordion" from Angular UI and now i want add inside this Accordeon the Popup DatePicker from Angular UI. The Problem is, if i click inside the Accordeon on the Date it opens the Popup so that i can choose the date but it opens this Popup inside the Accordeon. Is it possible that this popup is opened outside the Accordion window ? The Accordion Window is to small to display the whole date selector.

I hope you understand what i mean..

the code looks like that, the controller for the datePicker is the same as in the Angular UI example:

<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>

EDIT: ok i have solved the problem i must only add "datepicker-append-to-body="true"" and now it works..

1
angularjstwitter-bootstrap-3angular-uiangular-ui-bootstrap

1 Answers

1
votes

Here is the complete code, using the example used at Angular UI, showing where to set 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>

The modification is on line 5, on the input element