DatePicker not working inside a modal

Question

I have a site and here is a link, When you click on textfield you can see the DatePicker working But iF you click on ImportFriend -> Add Manual Friend -> then if you click on birthday field the datepicker never appears.I can see through firebug that the field got the hasDatePicker attribute. I am not sure what making it not to show the datepicker,anyone who can help me please thanks

Phenomenon

look into event delegation... – Selmner

why do you wrap it in a $(function() ? – Brokenhearted

@SmithSmithy - technically, he doesn't need that, because his script is at the end of the body. But it's good practice to put your script inside of a document ready function like that. – Selfregard

@Bluetoft thank you but the answer is bit vague – Phenomenon

Answer 1

As @Bluetoft says, the answer is event delegation.

The reason it's not working for you is because your datepicker is being bound to elements that exist at the time the script is run (not to mention, the birthday field has a different id than #datepicker, which is what your script is binding to).

When you dynamically bring in the new form, the datepicker is not bound to the new elements.

So, one method, according to this answer, is to construct your script like so:

$(function() {
    $("body").delegate("#datepicker", "focusin", function(){
        $(this).datepicker();
    });
});

Additionally, your form "birthday" input has an id of #fi_bday, which is another reason it's not being bound. I'd recommend that you assign any inputs where you want the datepicker with a class of "datepicker", then change your script to bind the datepicker functionality to '.datepicker' elements:

$(function() {
    $("body").delegate(".datepicker", "focusin", function(){
        $(this).datepicker();
    });
});

Finally, if you don't want to utilize the better, generic class method above, you can use two selectors in the selector below. The method below delegates in a manner as to bind the datepicker to the modal window element(s) as well:

$(function() {
    $("body").delegate("#datepicker, #fi_bday", "focusin", function(){
        $(this).datepicker();
    });
});

Selfregard

Answer 2

The solution mentioned above did not work for me.

As date-picker has not the z-index property, so it was not showing on modal/popup which has the z-index. I found that the date-picker was working fine but it was showing behind the modal.So I added the z-index property to date-picker class.

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

That's why I am sharing my solution to other users. I am sure this will help someone.

Preference

thanks, @t4taurus, I am facing this issue and am finally able to sort it out with your help. – Fey

II am having one select drop down field and one date picker field - Both are in diff div row .If i gave like this ,If I select drop down , then date picker is showing over the field – Holcman

Answer 3

Add property container:

$('.datepickerClass').datepicker({
           ...,
            container: "#modalId",
           ...,
        });

Murchison

Answer 4

Add z-index to your datepicker class and add important with it. give a Greater value than modal. Normally modal have a z-index of 1050

.yourDatePicker{ z-index:9999!important; }

Shackle

Answer 5

about C#.net in .aspx

function getjqueryselect() {
        $("#<%=this.txtBeginEdit.ClientID%>").datepicker($.datepicker.regional["th"]);
        $("#<%=this.txtBeginEdit.ClientID%>").datepicker("setDate", new Date());
        $("#<%=this.txtEndEdit.ClientID%>").datepicker($.datepicker.regional["th"]);
        $("#<%=this.txtEndEdit.ClientID%>").datepicker("setDate", new Date());
    }

and then in Page_Load in aspx.cs

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "test", "getjqueryselect();", true);

Fitts

Answer 6

I had the same issue and I figured out that I was rendering the datetimepicker library twice (once in the main page and once in the partial view). Rendering only once in the main page solved it.

Orthotropic

Answer 7

I tried the event delegation snippet/z-index But the select year dropdown funcionality of jquery datepicker just did NOT work - i can select date/month but NOT year

While date-picker for bootstrap did work - the gijgo one or the tempusdominus (which i did NOT try) - I just wanted to stick to jquery

So i got rid of modal functionality - and used collapse in bootstrap to show/hide/div as well as custom div_onshown/hide/cancel/ok using javascript

Moreta

Answer 8

<div class="modal fade" id="notifymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

remove your tabindex="-1" in your modal it will work

Lallation