jQuery DatePicker 不在模态内工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18519994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DatePicker not working inside a modal
提问by t4taurus
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 hasDatePickerattribute.
I am not sure what making it not to show the datepicker,anyone who can help me please thanks
我有一个网站，这里有一个链接，当你点击文本字段时，你可以看到 DatePicker 正在工作但是如果你点击 ImportFriend -> Add Manual Friend ->然后如果你点击生日字段，日期选择器永远不会出现。我可以通过萤火虫看到该字段获得了hasDatePicker属性. 我不确定是什么让它不显示日期选择器，任何可以帮助我的人请谢谢
回答by random_user_name
As @Bluetoft says, the answer is event delegation.
正如@Bluetoft 所说，答案是事件委托。
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).
它对您不起作用的原因是因为您的 datepicker 被绑定到脚本运行时存在的元素（更不用说，生日字段的 ID 与 #datepicker 不同，这是您的脚本绑定到的 ID） .
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:
此外，您的表单“生日”输入的 ID 为 #fi_bday，这是它没有被绑定的另一个原因。我建议您将任何输入分配给您想要使用“datepicker”类的日期选择器，然后更改您的脚本以将日期选择器功能绑定到'.datepicker'元素：
$(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();
});
});
回答by t4taurus
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.
由于日期选择器没有 z-index 属性，因此它没有显示在具有 z-index 的模式/弹出窗口中。我发现日期选择器工作正常，但它显示在模态后面。所以我将 z-index 属性添加到日期选择器类。
.datepicker{ z-index:99999 !important; }
That's why I am sharing my solution to other users. I am sure this will help someone.
这就是我将我的解决方案分享给其他用户的原因。我相信这会帮助某人。
回答by Mitr Raiputta
about C#.net in .aspx
关于 .aspx 中的 C#.net
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
然后在 aspx.cs 中的 Page_Load
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "test", "getjqueryselect();", true);
回答by Abdus Salam Azad
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
将 z-index 添加到您的 datepicker 类并添加重要内容。给出比模态更大的值。通常模态的 z-index 为 1050
.yourDatePicker{ z-index:9999!important; }
回答by Miguel A Santiago
Add property container:
添加属性容器：
$('.datepickerClass').datepicker({
...,
container: "#modalId",
...,
});
回答by Bogdan Dragomir
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.
我遇到了同样的问题，我发现我渲染了 datetimepicker 库两次（一次在主页面中，一次在局部视图中）。只在主页面渲染一次就解决了。
