Bootstrap 3 Datepicker v4：当 datepicker 内联时不会触发 dp.show 和 dp.change 事件答案

【问题标题】：Bootstrap 3 Datepicker v4: dp.show and dp.change events are not fired when datepicker is inlineBootstrap 3 Datepicker v4：当 datepicker 内联时不会触发 dp.show 和 dp.change 事件
【发布时间】：2016-09-13 20:39:30
【问题描述】：

我正在使用the 4.17.37 of Bootstrap 3 Datepicker - eonasdan datepicker

我有一个正确显示的内联日期选择器，我只会使用天数模式，所以我使用以下代码，但不会触发事件 dp.show 和 dp.update。

$('#datetimepicker').datetimepicker({
    inline: true,
    format: 'DD/MM/YYYY'
}).on('dp.show dp.update', function () {
    $(".datepicker-days").find("th").eq(1).removeAttr('title')
    .css('cursor', 'default')
    .css('background', 'inherit').on('click', function (e) {
        e.stopPropagation();
    });
});

编辑 1

我也尝试使用 dp.change（以及 show.dp、update.dp、change.dp）。

如果日期选择器不是内联，则触发事件。

编辑 2

我正在使用：

jquery-1.12.3.min.js
moment.js/2.13.0/moment.min.js
moment.js/2.13.0/moment-with-locales.min.js
bootstrap/3.3.6/js/bootstrap.min.js
bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js

编辑 3

与 4.17.42 版本相同的问题

【问题讨论】：

事件名真的是dp.show吗？也就是说，“命名空间”在 jquery 事件 (show.dp) 之后出现。不过，插件可能会将它们倒过来命名。
事件名称正确。见这里eonasdan.github.io/bootstrap-datetimepicker/Events。
是throw new Error("datetimepicker component should be placed within a relative positioned container") 吗？ My recreation of the problem 做到了。
还有this works。无论如何我都会写一个答案，以防其他人遇到职位问题。

标签： javascript jquery twitter-bootstrap-3 bootstrap-datetimepicker

【解决方案1】：

你试过 dp.change 吗？（而不是 dp.show）

$('#datetimepicker').datetimepicker({
    inline: true,
    format: 'DD/MM/YYYY'
}).on('dp.change dp.update', function () {
    $(".datepicker-days").find("th").eq(1).removeAttr('title')
    .css('cursor', 'default')
    .css('background', 'inherit').on('click', function (e) {
        e.stopPropagation();
    });
});

【讨论】：

是的，但没有任何变化。这似乎取决于日期选择器是内联的事实。

【解决方案2】：

问题在于，当小部件内联时，dp.show 事件不会触发。

根据插件文档，dp.show 事件仅从 toggle() 或 show() 函数发出，但前提是小部件在调用之前被隐藏。

所以我的解决方案有点脏，但我认为它可以解决您的问题。您可以在小部件初始化后立即调用hide() 和show() 函数。

$('#datetimepicker').datetimepicker({
    inline: true,
    format: 'DD/MM/YYYY'
}).on('dp.show dp.change', function () {
    // console.log('dp.show or dp.change event');
    $(".datepicker-days").find("th").eq(1)
        .removeAttr('title')
        .css('cursor', 'default')
        .css('background', 'inherit')
        .on('click', function (e) {
            e.stopPropagation();
        });
 });

$('#datetimepicker').data("DateTimePicker").hide();
$('#datetimepicker').data("DateTimePicker").show();

在这里调琴：https://jsfiddle.net/zeudzqe1/。

欢迎对此回复进行任何进一步的改进。

【讨论】：

【解决方案3】：

插件insists that the component is placed within a relatively positioned container.

它actually checks，并在需要时抛出错误：

datetimepicker 组件应放置在相对定位的容器中

根据设计，未捕获的错误会导致它放弃其余代码。

I fixed it 通过使父级相对定位：

JS

// no changes!
$('#datetimepicker').datetimepicker({
    inline: true,
    format: 'DD/MM/YYYY'
}).on('dp.show dp.update', function () {
    $(".datepicker-days").find("th").eq(1).removeAttr('title')
    .css('cursor', 'default')
    .css('background', 'inherit').on('click', function (e) {
        e.stopPropagation();
    });
});

CSS

.relatively-positioned {
  position: relative;
}

HTML

<div class="relatively-positioned">
  <input id="datetimepicker">
</div>

【讨论】：