jquery datepicker不显示引导模式3答案

【问题标题】：jquery datepicker not showing boostrap modal 3jquery datepicker不显示引导模式3
【发布时间】：2015-07-01 17:29:37
【问题描述】：

我通过单击按钮打开引导模式。模式打开，并且有一个与 datepicker 挂钩的输入字段。我单击文本框并看到日历。我关闭模式。我再次打开模式，然后单击文本框，日历不显示。为什么我第二次打开模式并单击文本框时没有显示日期选择器？

我有一个部分视图 _RequestAppointment，底部有以下 javascript。

<script>
    $(function () {

        $(".requestedAppointmentDate").datepicker();

        $('#myModal').on('hidden.bs.modal', function () {
            //alert('hello');
            //$(".requestedAppointmentDate").datepicker("destroy");
            //$(".requestedAppointmentDate").removeClass("hasDatepicker").removeAttr('id');
            $(".requestedAppointmentDate").datepicker("destroy");
        });

        $('#myModal').on('show.bs.modal', function () {
            //$('.HomeContainer').addClass('blur');
            $(".requestedAppointmentDate").datepicker({});
        })

    });
</script>

这是主页中的javascript。我只显示与 _RequestAppointment 部分视图相关的代码。

$(function () {
    function onRequestAppt() { var url = '@Url.Action("_RequestAppointment", "Home")'; ResetModal(); LaunchModal(url); }



    function ResetModal() {      // Resets the popup
                $('body').on('hidden.bs.modal', '.modal', function () {
                    $(this).removeData('bs.modal');
                });
            }
        function LaunchModal(url) {
            $('#myModal').modal({
                remote: url,
                backdrop: 'static'
            });
        }


    $('#myModal').on('show.bs.modal', function () {
                    $('.HomeContainer').addClass('blur');
                    //$(".requestedAppointmentDate").datepicker({});
                })

                $('#myModal').on('hide.bs.modal', function () {
                    $('.HomeContainer').removeClass('blur');

                });
}

我在谷歌上搜索过这个问题，但没有找到解决方案。请帮忙。

【问题讨论】：

你能给我们一些代码还是我必须用我的魔眼找出它为什么不起作用？
正如多瓦拉所说 ^^
这是一个基本的工作示例：jsfiddle.net/my4809p0
你给了我们一个工作的例子，你的不工作的版本有什么不同？
你能用你的代码版本编辑你原来的问题吗？

标签： jquery twitter-bootstrap

【解决方案1】：

我搜索了 jquery ui datepicker，发现了这个：

$('#myModal').on('hidden.bs.modal', function () {
    $("#datepicker").datepicker( "destroy" );
})

尝试在关闭时调用它。

还有你打开的初始化日历的脚本在哪里？

$('#myModal').on('shown.bs.modal', function (e) {
  $("#datepicker").datepicker({});
})

【讨论】：

您好，感谢您的回复。我编辑了我的帖子以使其更清晰。因此，我添加了 javascript 代码以在模式关闭后删除 datepicker 对象，但仍然无法正常工作。
show.bs.modal 在主页上。但我在该方法中没有这一行 $("#datepicker").datepicker({});
你需要 $('#myModal').on('shown.bs.modal', function (e) { $("#datepicker").datepicker({}); } ) 在模态部分页面上
所以我将它添加到部分。我第二次打开弹出窗口时仍然没有看到日历。我编辑了我的帖子以显示更新的代码。
我在这里猜测，如果您希望我们帮助您，我们需要所有相关代码

【解决方案2】：

如果没有看到代码，问题很可能出在调用初始化日历插件的位置。

如果您的视图确实被破坏了，那么onShow 方法就可以了，因为您可以保证它会被调用以进行新的显示。但是，除非您自己管理这些视图的生命周期，否则模态视图通常不会（有意地）正确销毁。

在这些情况下的一个常见问题是幽灵视图（它们不会完全被破坏）在 DOM 元素上保持侦听器，您可能还会因为多次显示视图而重复 dom 元素。（检查你的 DOM）

在我的案例中，将 Backbone 与 Marionette 结合使用，我将插件的初始化从渲染方法移至 onDomRefresh 方法，因为我使用 ModelBinder 重新渲染模型更改的视图，反之亦然。在随后重新渲染同一视图时，onShow 方法没有被调用，但 onDomRefresh 被调用。

希望这会有所帮助。

【讨论】：

【解决方案3】：

感谢 LiverPoolOwen 指出 bs.modal.shown() 事件。我所要做的就是在显示（）事件中初始化我的日期选择器，仅此而已。错误地我在 bs.modal.show() 事件中初始化了日期选择器。

我不必销毁日期选择器或类似的东西。

【讨论】：