DatePicker 不在模态内工作

Question

我有一个网站，这里有一个链接，当您单击文本字段时，您可以看到 DatePicker 正在工作但是如果您单击 I mportFriend -> Add Manual Friend ->然后如果您单击生日字段，则日期选择器永远不会出现。我可以看到通过萤火虫，该字段获得了hasDatePicker属性。 我不确定是什么让它不显示日期选择器，任何可以帮助我的人请谢谢

Answer 1

正如@Bluetoft 所说，答案是事件委托。

它对您不起作用的原因是因为您的 datepicker 被绑定到脚本运行时存在的元素（更不用说，生日字段的 ID 与 #datepicker 不同，这是您的脚本绑定到的 ID） .

当您动态引入新表单时，日期选择器不会绑定到新元素。

因此，根据此答案，一种方法是像这样构建脚本：

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

此外，您的表单“生日”输入的 ID 为 #fi_bday，这是它没有被绑定的另一个原因。 我建议您将任何输入分配给您想要使用“datepicker”类的日期选择器，然后更改您的脚本以将日期选择器功能绑定到'.datepicker'元素：

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

最后，如果你不想使用上面更好的通用类方法，你可以在下面的选择器中使用两个选择器。 下面的方法以将日期选择器绑定到模态窗口元素的方式进行委托：

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

Answer 2

上面提到的解决方案对我不起作用。

由于日期选择器没有 z-index 属性，因此它没有显示在具有 z-index 的模式/弹出窗口中。 我发现日期选择器工作正常，但它显示在模态后面。所以我将 z-index 属性添加到日期选择器类。

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

这就是我将我的解决方案分享给其他用户的原因。 我相信这会帮助某人。

Answer 3

将 z-index 添加到您的 datepicker 类并添加重要内容。 给出比模态更大的值。 通常模态的 z-index 为 1050

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

Answer 4

关于 .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());
    }

然后在 aspx.cs 中的 Page_Load

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

Answer 5

添加属性容器：

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

Answer 6

我遇到了同样的问题，我发现我渲染了 datetimepicker 库两次（一次在主页面中，一次在局部视图中）。 只在主页面渲染一次就解决了。

Answer 7

我尝试了事件委托片段/z-index 但是 jquery datepicker 的选择年份下拉功能不起作用 - 我可以选择日期/月份但不能选择年份

虽然引导程序的日期选择器确实有效 - gijgo one 或 tempusdominus（我没有尝试过） - 我只是想坚持使用 jquery

所以我摆脱了模态功能 - 并在引导程序中使用折叠来显示/隐藏/div 以及使用 javascript 的自定义 div_onshown/hide/cancel/ok