4

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

4

7 回答 7

15

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

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

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

所以，根据这个答案，一种方法是像这样构造你的脚本：

$(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();
    });
});
于 2013-08-29T20:08:45.257 回答
12

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

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

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

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

于 2016-09-21T13:43:15.893 回答
1

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

.yourDatePicker{ z-index:9999!important; }
于 2019-01-25T19:25:03.540 回答
0

添加属性容器：

$('.datepickerClass').datepicker({
           ...,
            container: "#modalId",
           ...,
        });
于 2019-03-16T00:25:45.440 回答
0

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

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

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

于 2020-09-01T07:04:55.673 回答
0

关于 .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);
于 2016-06-02T09:02:22.950 回答
0

我遇到了同样的问题，我发现我正在渲染 datetimepicker 库两次（一次在主页中，一次在部分视图中）。在主页中仅渲染一次解决了它。

于 2019-03-18T14:47:27.903 回答