I'm using the 4.17.37 of Bootstrap 3 Datepicker - eonasdan datepicker

I have an inline datepicker correctly showed and I would only the days mode, so I use the following code, but the events dp.show and dp.update are not fired.

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

EDIT 1

I tried also with dp.change (and show.dp, update.dp, change.dp too).

If the datepicker is not inline the events are fired.

EDIT 2

I'm using:

• 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

EDIT 3

The same issue with version 4.17.42

I'm using the 4.17.37 of Bootstrap 3 Datepicker - eonasdan datepicker

I have an inline datepicker correctly showed and I would only the days mode, so I use the following code, but the events dp.show and dp.update are not fired.

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

EDIT 1

I tried also with dp.change (and show.dp, update.dp, change.dp too).

If the datepicker is not inline the events are fired.

EDIT 2

I'm using:

• 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

EDIT 3

The same issue with version 4.17.42

• javascript
• jquery
• twitter-bootstrap-3
• bootstrap-datetimepicker

• Is the event name really dp.show? That is backwards, the "namespace" es after in jquery events (show.dp). The plugin might name them backwards, though. – doug65536 Commented May 17, 2016 at 19:15
• 1 The event name is correct. See here eonasdan.github.io/bootstrap-datetimepicker/Events. – andreivictor Commented May 17, 2016 at 19:18
• Does it throw new Error("datetimepicker ponent should be placed within a relative positioned container") ? My recreation of the problem did. – doug65536 Commented May 17, 2016 at 19:28
• And this works. I'll write an answer anyway, in case another person hits the position issue. – doug65536 Commented May 17, 2016 at 19:34

3 Answers 3

The issue is that the dp.show event doesn't trigger when the widget is inline.

According to plugin documentation, the dp.show event is only emitted from toggle() or show() functions, but only if the widget was hidden before the call.

So my solution is a little bit dirty, but I think that it solves your problem. You can call hide() and show() functions immediately after widget initialization.

$('#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 here: https://jsfiddle/zeudzqe1/.

Any further improvement of this response is weled.

Have you tried dp.change ? (instead of 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();
    });
});

The plugin insists that the ponent is placed within a relatively positioned container.

It actually checks, and throws an error if needed:

datetimepicker ponent should be placed within a relative positioned container

Uncaught errors cause it to abandon the rest of the code, by design.

I fixed it by making the parent relatively positioned:

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>