Javascript Bootstrap 3 Datepicker v4:dp.show和dp.change事件在Datepicker内联时不会激发

我正在使用

我已经正确显示了一个内联日期选择器，并且我只会选择days模式，因此我使用以下代码，但是没有触发事件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.change吗？（代替dp.show）

---

问题是当小部件内联时，

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();

在这里拉小提琴：

---

欢迎对此响应的任何进一步改进。

插件

如果需要，它将启动并抛出一个错误：

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

未捕获的错误导致它通过设计放弃其余的代码

通过使父对象相对定位：

JS CSS HTML

是，但没有任何变化。这似乎取决于datepicker是内联的这一事实。事件名称真的是

dp.show

？也就是说，在jquery事件（

show.dp

）中，“名称空间”位于后面。不过，插件可能会将它们反向命名。事件名称是正确的。请参见此处。它是否

抛出新错误（“datetimepicker组件应放置在相对定位的容器中”）

？是的，还有。无论如何，我会写一个答案，以防另一个人碰到职位问题。

$('#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();

// 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();
    });
});

.relatively-positioned {
  position: relative;
}

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