CODEWITHSUNDEEP
angularjsbootstrap-modalangularjs-material
Simerjit Parmar
Simerjit Parmar

Reputation: 818

md-datepicker is not working on bootstrap modal, while works on simple page in angularjs

I am using md-datepicker from angular material. It is working fine except on bootstrap modal. I have applied various solutions like z-index:1200 but none of them proves useful for me.

Following libraries I am using:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />

It shows the area when I use inspect element: enter image description here

Here is the Modal Code:

<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
    <div class="modal-dialog">
        <form ng-submit="addNewEvent()">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span>&nbsp; Add Event</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                </div>
                <div class="modal-body">
                    <div class="add-member-modl">
                        <div class="form-group">
                            <label>Event Name</label>
                            <input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
                            <input type="hidden" ng-model="newEvent.event_id">
                            <ul class="advance_search_inner" ng-show="focusInput">
                                <li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
                                    {{event.name}}
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">   
                            <label>Date</label>
                            <md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
                        </div>

                        <div class="form-group">   
                            <label>Duration</label>
                            <select class="form-control" ng-model="newEvent.duration">
                                <option value="1 Day">1 Day</option>
                                <option value="2 Days">2 Days</option>
                                <option value="3 Days">3 Days</option>
                            </select>
                            <!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
                        </div>
                    </div>
                </div>
                <div class="modal-footer mod-footr">
                    <button type="submit" class="btn btn-default">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

Upvotes: 1

Views: 561

Answers (1)

Roberto
Roberto

Reputation: 4899

Probably the z-index of the modal is higher than the date picker selector. Try to change the datepicker z-index with the following css:

.md-datepicker-calendar-pane {
     z-index: 2000;
}

Upvotes: 0

Related Questions