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
1
: 13443 At:- 7/9/2018 11:39:48 AM
jQuery Javascript datepciker inside modal pop-up







3 Answers
profileImage Answered by:- manish

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

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

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

3
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


profileImage Answered by:- ShahabAlam Khan

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

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


profileImage 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; }"

0
At:- 6/15/2021 11:25:28 AM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use