bootstrap-datetimepicker-widget 未在弹出窗口中加载

Question

我正在尝试通过以 ver 4.17.47 安装的“bower install eonasdan-bootstrap-datetimepicker#latest --save”下载来集成 eonasdan 日期时间选择器，参考 http://eonasdan.github.io/bootstrap-datetimepicker/

除了模式弹出窗口外，它在所有页面上都能完美运行。浏览器控制台没有问题，当我点击输入框bootstrap-datetimepicker-widget时没有加载-

以下是代码-

Html : input type='text' class="form-control" id='datetimepicker8'

Script : $('#datetimepicker8').datetimepicker();

有什么建议吗？

我正在使用所有必要的库，因为它在我的应用程序的其他页面上运行良好。

我已经尝试使用 jquery 3.2.1/3.3.1 使用 moment.js 2.18.1、moment-timezone 0.5.13、bootstrap 3.3.7、datetimepicker 4.7.47

我正在使用聚合物加载器来加载自定义 *.html 文件以及带有底层 nodejs 结构的 Bower 组件。

所有自定义的html文件都用<dom-module>封装，当父html页面（有popup modal的引用）加载时，它的ready函数和popup modal的ready函数一起被调用（另一个*.html）加载datetimepicker 但是当我点击datetimepicker 输入框时，日历不会显示。在我从浏览器控制台检查时，bootstrap-datetimepicker-widget 没有显示，但是该小部件完美地显示在我的应用程序的其他页面上。

我尝试在浏览器控制台上调试datetimepicker() 函数，并通过跟踪警报函数来了解返回的datetimepicker 对象。

alert(JSON.stringify($('#datetimepicker8').datetimepicker(), null, 4));

在 datetimepicker 不工作的弹出窗口中上述警报的结果与 datetimepicker 在我的应用程序中工作的地方的结果相同，只是没有在弹出窗口上呈现 datetimepicker 日历。

我认为这是浏览器问题，因此尝试使用以下 Chrome 版本： 版本 73.0.3683.86（官方版本）（32 位） 版本 73.0.3683.86（官方版本）（64 位） 版本 72.0.3626.81（官方版本）（64 位） 注意：我的应用程序主要是为 chrome 开发的，我们不支持其他浏览器。

在删除我的 chrome 配置文件后，还尝试在 Incognito Chrome 窗口上使用。

我还尝试在弹出的 *.html 文件中直接包含 cdn js 调用，但在调试时我发现它是从应用程序 jspm 包中引用 nodejs 3.2.1 并从聚合物加载器中引用 datetimepicker，这是完全正确的。

HTML : input type='text' class="form-control" id='datetimepicker8'

Script : $('#datetimepicker8').datetimepicker();

上面的脚本调用被放置在一个就绪函数中。

预期结果：日期时间选择器应加载到输入框。 实际结果：点击输入框 datetimepicker 不加载。

Answer 1

感谢 Udit、Mishu 和团队，您的回复给了我一个方向。以下是我应用的解决方案 -

日期时间选择器在作为单独窗口弹出的模态弹出窗口中未正确加载，因此我添加了以下 jquery 加载函数以使其正常工作。

$(function(){ $('#datetimepicker8').datetimepicker(); });

非常感谢。

Answer 2

您是否尝试在模态弹出显示事件show.bs.modal 中调用$('#datetimepicker8').datetimepicker()。我假设您在准备好文档或加载页面时绑定datepicker。当modal popup出现时需要绑定