DatePicker在模态中不起作用

时间:2013-08-29 20:01:50

标签: javascript jquery html datepicker modal-dialog

我有一个网站here is a link,当您点击文本字段时,您可以看到DatePicker正常工作 但是你单击我mportFriend -> Add Manual Friend ->然后如果你单击生日字段,则日期选择器永远不会出现。我可以通过firebug看到该字段获得了hasDatePicker属性。 我不确定是什么让它不显示datepicker,任何人都可以帮助我,谢谢

7 个答案:

答案 0 :(得分:12)

正如@Bluetoft所说,答案是事件授权。

它不适合你的原因是因为你的日期选择器被绑定到运行脚本时存在的元素(更不用说,生日字段的id不同于#datepicker ,这是你的脚本绑定的。)

当您动态引入新表单时,datepicker不会绑定到新元素。

因此,根据this answer,一种方法就是构建你的脚本:

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

另外,您的表单“生日”输入的ID为#fi_bday,这是它未受约束的另一个原因。我建议你在任何你希望datepicker使用“datepicker”类的地方分配输入,然后改变你的脚本以将datepicker功能绑定到'.datepicker'元素:

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

最后,如果您不想使用上面更好的通用类方法,可以在下面的选择器中使用两个选择器。下面的方法以一种方式委托将datepicker绑定到模态窗口元素:

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

答案 1 :(得分:7)

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

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

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

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

答案 2 :(得分:0)

关于C#.net 在.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());
    }

然后在aspx.cs的Page_Load中

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

答案 3 :(得分:0)

将z-index添加到datepicker类,并对其添加重要内容。提供比情态更大的价值。通常模态的Z索引为1050

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

答案 4 :(得分:0)

添加属性容器:

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

答案 5 :(得分:0)

我遇到了同样的问题,我发现我两次渲染了datetimepicker库(一次在主页上,一次在部分视图中)。在主页中仅渲染一次即可解决该问题。

答案 6 :(得分:0)

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

虽然引导程序的日期选择器确实起作用了-gijgo一个或tempusdominus(我没有尝试过)-我只想坚持使用jQuery

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