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

Question

我正在使用 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
时刻.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 相同的问题

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

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

Fiddle 这里：https://jsfiddle.net/zeudzqe1/.

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

Answer 3

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

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

datetimepicker component should be placed within a relative positioned container

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

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>

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 inline

javascript

jquery

twitter-bootstrap-3

bootstrap-datetimepicker

JS

CSS

HTML