bootstrap modal with z-index css

Question

I am creating a web app in which i want to select date from textbox which is located at modal, when i click on the textbox date(material designing) is appearing behind the modal, i know it is because i need to set the z-index

the following examples are tried by me but i am unsuccessful

<style>
    .modal{
        position:relative;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:1;
}
</style>

modal is not opening

<style>
    .modal{
        position:absolute;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:2;
}
</style>

content behind the modal is appearing

<style>
    .modal{
        position:absolute;
        z-index:10000;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

date is not appearing behind the modal and style of my modal function innappropriateky

<style>
    .modal{
        position:fixed;
        z-index:1;
}
    .calsen{
        position:absolute;
        z-index:100000;
}
</style>

content behind the modal is appearing

this is how i declare modal and textbox(inside modal body)

<div id="update" class="modal fade" role="dialog" >

Textbox

<div class="form-clearify">
    <div class="row" style="margin-top:3px;">
        <div class="col-md-12 col-sm-12 col-xs-12" style="background-color:whitesmoke;">
            <label>Select Date </label>
            <md-datepicker class="calsen" ng-model="mddate" ng-change="dateformatechanged()" md-placeholder="Enter date"></md-datepicker>
        </div>
    </div>
</div>

what i need to do now?

Answer 1

I would make the z-index of your datepicker higher, instead of messing around with modal z-index. (Which could possibly break something else)

Answer 2

Try this:

CSS:

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