Trouble Adding DatePicker to Modal - Displays in backdrop

Question

I am trying to insert a DatePicker I found here: http://www.eyecon.ro/bootstrap-datepicker/ but I cannot get it to display in front of my modal. (I can see it in the backdrop of the modal)

I am not sure if I either implemented it incorrectly, or if I need to rig it to be on top of the modal's display.

Here is my Bundle.config where I added the datepicker.css and bootstrap-datapicker.js files.

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/datepicker.css",
                  "~/Content/site.css"));

        bundles.Add(new ScriptBundle("~/bundles/myscript").Include(
                  "~/Scripts/MyScripts.js", "~/Scripts/bootstrap-datepicker.js"));
    }
}

And here is my modal

<div class="modal fade" id="createMovie" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header" style="background-color: #428bca">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel" style="font-size: 30px; font-style:oblique; color:white">Create</h4>
         </div>
         <div class="modal-body">
            <table class="table" id="createTable">
               <tr>
                  <th class="col-lg-4">
                     <h5 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h5>
                  </th>
                  <th class="col-lg-7 col-lg-offset-1">
                     <input type="text" name="createName" style="text-align: center; height: 35px; font-size: 20px; width: 100%" placeholder="Title" />
                  </th>
               </tr>
               <tr>
                  <th class="col-lg-4">
                     <h5 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h5>
                  </th>
                  <th class="col-lg-7 col-lg-offset-1">
                     <input type="text" name="createRelease" id="datepicker" style="text-align:center; height:35px; font-size:20px; width:100%" placeholder="Date (mm/dd/yyyy)" />
                  </th>
               </tr>
               <tr>
                  <th class="col-lg-4">
                     <h5 style="font-size:x-large"><span style="font-weight:bolder">Description</span></h5>
                  </th>
                  <th class="col-lg-7 col-lg-offset-1">
                     <input type="text" name="createDescription" style="text-align:center; height:35px; font-size:20px; width:100%" placeholder="Description" />
                  </th>
               </tr>
            </table>
         </div>
         <div class="modal-footer">
            <button type="button" onclick="createFunction(this)" class="btn btn-success">Create</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
         </div>
      </div>
   </div>
</div>

So it "seems" to be working fine, except that I cannot click anything in the calendar as it is appearing in the backdrop.

Here is an image for reference enter image description here

Any and all help apprecaited!

I am new to a lot of this, so if the solution is a little tricky a detailed explanation would be welcomed! :)

score 1 · Accepted Answer · answered Jun 05 '14 at 14:53

1

It's a css problem :

The modal datepicker is behind the modal so :

CSS :

.datepicker{
    z-index: 1100 !important;
}

If the datepicker widget is well .ui-datepicker

answered Jun 05 '14 at 14:53

BENARD Patrick

30,363
16
99
105

Where will I be placing that? I tried the `Site.css` but nothing changed. Thank you for the help thus far! – Austin Jun 05 '14 at 14:56
AH your update worked! but the calendar looks a little janky hahaha – Austin Jun 05 '14 at 14:59
Do you have any suggestion as to where I should be putting the .js and .css within the bundle? like order-wise, I feel like styles are conflicting. – Austin Jun 05 '14 at 15:00

Trouble Adding DatePicker to Modal - Displays in backdrop

1 Answers1

Linked