Bootstrap 3 Datepicker v4: события dp.show и dp.change не запускаются, когда средство выбора даты встроено

Я использую версию 4.17. 37 из 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.мин.js
  • момент.js/2.13.0/момент.мин.js
  • момент.js/2.13.0/момент-с-locales.min.js
  • бутстрап/3.3.6/js/bootstrap.min.js
  • bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js

ИЗМЕНИТЬ 3

Та же проблема с версией 4.17.42


javascript jquery twitter-bootstrap-3 bootstrap-datetimepicker
person Sefran2    schedule 17.05.2016    source источник
comment
Действительно ли название события dp.show? Это наоборот, пространство имен идет после событий jquery (show.dp). Однако плагин может называть их наоборот.   -  person doug65536    schedule 17.05.2016
comment
Название мероприятия верное. См. здесь eonasdan.github.io/bootstrap-datetimepicker/Events.   -  person andreivictor    schedule 17.05.2016
comment
Это throw new Error("datetimepicker component should be placed within a relative positioned container") ? Мое воссоздание проблемы помогло.   -  person doug65536    schedule 17.05.2016
comment
И это работает. Я все равно напишу ответ, на случай, если кто-то решит проблему с позицией.   -  person doug65536    schedule 17.05.2016

Ответы (3)


arrow_upward
2
arrow_downward

Проблема в том, что событие 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/.

Любое дальнейшее улучшение этого ответа приветствуется.

person andreivictor    schedule 17.05.2016

arrow_upward
0
arrow_downward

Вы пробовали 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();
    });
});
person Anwar Ul-Haq    schedule 17.05.2016
comment
Да, но ничего не меняется. Кажется, это зависит от того, что средство выбора даты встроено. - person Sefran2; 17.05.2016

arrow_upward
0
arrow_downward

Плагин настаивает на том, чтобы компонент был помещен в контейнер с относительной позицией.

Он действительно проверяет , и при необходимости выдает ошибку:

Компонент datetimepicker должен быть помещен в контейнер с относительным позиционированием.

Неперехваченные ошибки заставляют отказаться от остального кода по замыслу.

я исправил это, сделав родителя относительно расположенным:

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>
person doug65536    schedule 17.05.2016