javascript - Bootstrap 3 Datepicker v4 : dp. show 和 dp.change 事件不会在 datepicker 内联时触发

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

我正在使用 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 事件不会在小部件内联时触发。

根据插件文档,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/ .


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

关于javascript - Bootstrap 3 Datepicker v4 : dp. show 和 dp.change 事件不会在 datepicker 内联时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37281326/

相关文章:

javascript - iframe 在附加内容之外不再可点击

javascript - 为什么不使用 header 而不是缓存破坏者?

jQuery 查找某个类的下一个/上一个元素,但不一定是兄弟元素

jquery - Vue loader - 为所有组件全局导入 jquery

html - 使用左侧和右侧的面板创建 Bootstrap 布局

javascript - Node.js:无法从同一文件内的其他函数返回值

javascript - Highcharts - 重绘空图表

jQuery Masonry 空白空间

twitter-bootstrap - 当在移动设备上显示行时, Bootstrap 响应网格更改列的顺序?

jquery - 水平滚动右侧的间隙