javascript DatePicker在模态中不工作

fae0ux8s  于 2023-06-20  发布在  Java
关注(0)|答案(8)|浏览(101)

我有一个网站和here is a link,当你点击文本字段,你可以看到DatePicker工作,但如果你点击我mportFriend -> Add Manual Friend ->然后如果你点击生日字段的datepicker永远不会出现.我可以通过Firebug看到该字段得到了hasDatePicker属性.我不知道是什么让它不显示的datepicker,任何人谁可以帮助我,请感谢

cl25kdpy

cl25kdpy1#

正如@Bluetoft所说,答案是事件授权。
它对你不起作用的原因是因为你的datepicker被绑定到元素 *,这些元素在脚本运行时就存在 *(更不用说,birthday字段的id与#datepicker不同,而#datepicker正是你的脚本绑定到的)。
当动态引入新表单时,日期选择器不会绑定到新元素。
因此,根据this answer,一种方法是像这样构造脚本:

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

此外,您的表单“birthday”输入的ID为#fi_bday,这是它未被绑定的另一个原因。我建议你在任何你想要的输入中分配一个“datepicker”类,然后修改你的脚本将datepicker功能绑定到'.datepicker'元素:

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

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

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

n3ipq98p2#

上面提到的方法对我不起作用。

**由于date-picker没有z-index属性,所以它没有显示在有z-index的modal/popup上。**我发现date-picker工作正常,但它显示在modal后面。所以我将z-index属性添加到date-picker类。

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

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

kqlmhetl

kqlmhetl3#

添加属性容器:

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

5ssjco0h4#

将z-index添加到你的datepicker类中并添加important。给予大于模态的值。通常模态具有1050的z指数

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

1mrurvl15#

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

q35jwt9p6#

我遇到了同样的问题,我发现我渲染了两次datetimepicker库(一次在主页面,一次在部分视图)。只在主页面中呈现一次就解决了这个问题。

ybzsozfc

ybzsozfc7#

我尝试了事件委托片段/z索引,但jquery datepicker的选择年份下拉功能不起作用-我可以选择日期/月份,但不能选择年份
虽然bootstrap的日期选择器确实可以工作-gijgo或tempusdominus(我没有尝试)-我只想坚持使用jquery
所以我去掉了模态功能,并在bootstrap中使用collapse来显示/隐藏/div以及使用javascript自定义div_onshowed/hide/cancel/ok。

lbsnaicq

lbsnaicq8#

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

删除你的tabindex="-1”在你的模态它会工作

相关问题