Datepicker is not working inside bootstrap modal pop-up

I am using jQuery Datepicker inside a page, which works when complete page is loaded in browser, but when I load the same page in bootstrap modal pop-up, jQuery datepicker inside it doesn't work.

Not sure how to solve it, here is my textbox HTML

<div class="form-group form-group-default input-group col-md-12">
            <div class="form-input-group">
                <label class="label-lg fade">Event Date</label>
                <input class="form-control input-lg" id="EventDate" name="EventDate" type="text">
            </div>
            <div class="input-group-addon ">
                <i class="fa fa-calendar"></i>
            </div>
        </div>

And jQuery to initialize it

 $("#EventDate").datepicker();

There is no error in Console also, but cannot see datepicker

Asked by:- jon

: 14574 At:- 7/9/2018 11:39:48 AM

jQuery Javascript datepciker inside modal pop-up

add comment to question

3 Answers

Answered by:- manish

There can be two possible reasons of datepicker not working inside bootstrap pop-up modal.

Your datepicker need to be intialised using delegate, so basically inside the main page(page from which you are calling Pop-up) use the below jQuery code to initialize datepicker
```
$("body").delegate("#DatePicker", "focusin", function () {
            
            $(this).datepicker();
        });?
```
If above code works for you, the reason it's wasn't working for you is because your datepicker is being bound to elements that exist at the time the script is run.
Another possible cause of this can be, Datepicker is working fine, but it is hidden beside Modal pop-up, so in this case basically you need higher CSS z-index of datepicker to show over modal pop-up, add this CSS and try again
```
.datepicker{ z-index:99999 !important; }?
```

one of the above solutions should resolve your issue.

At:- 7/10/2018 3:49:00 PM Updated at:- 7/10/2018 3:52:51 PM

Excellent answer with proper details, I had to implement both first and second solution to make it work. 0

By : jon - at :- 7/12/2018 1:12:26 PM

comment to above answer

Answered by:- ShahabAlam Khan

@manish you are genius. your solution worked like a charm. thanks alot.

At:- 1/1/2020 2:44:00 PM Updated at:- 1/3/2020 7:00:30 AM

comment to above answer

Answered by:- neena

You can also initialize datepicker once modal is shown, and make main container of datepicker as Modal

$('#yourModal').on('shown.bs.modal', function() {
   $('.date').datepicker({
     format: "dd/mm/yyyy",
     startDate: "01-01-2019",
     autoclose: true,
     todayHighlight: true,
     container: '#YourModalBodyDiv'
   });
});

and set Z-Index of datepicker as mentioned above ".datepicker{ z-index:99999 !important; }"