Бутстрап-датапикер в кнопке начальной загрузки

Мое требование. Я работаю над выпадающим списком кнопок для загрузки в twitter (http://twitter.github.io/bootstrap/components.html#buttonDropdowns) и используя bootstrap- datepicker (http://eternicode.github.io/bootstrap-datepicker/#examples) в одном из элементов списка, как показано на рисунке ниже.

В соответствии с моим требованием мне нужно иметь месячный календарь в последнем элементе и нажимать на это, чтобы открыть bootstrap-datepicker, и я должен выбрать месяц и год.

Проблема, перед которой я сталкиваюсь. Когда я открываю этот datepicker и выбираю любой месяц или год или нажимаю на любую навигацию в datepicker, чтобы переместиться на другой месяц или год, кнопка выпадает, скрывается, но datepicker остается там, как показано на рисунке ниже. Я пытался, но не смог заставить его работать.

Что я думаю (не уверен, что это правильно или нет): когда я нажимаю на datepicker, он привязывается к элементу body непосредственно там, где все элементы списка и их дочерние элементы находятся в глубине HTML. Таким образом, даже если я пытаюсь остановить распространение события для любого щелчка внутри раскрывающегося списка, он не будет рассчитывать на datepicker, поскольку он добавляется к телу. (Только для получения дополнительной информации у меня есть некоторые действия, определенные при щелчке других элементов списка)

Было бы очень полезно, если бы кто-то помог мне справиться с этим, мне действительно нужно, чтобы эта работа работала для моего проекта.

Ответ 1

С помощью этого механизма выбора даты вы должны предотвратить распространение на отдельных кнопках. Добавьте это в свой script.

    $(document).on('click', 'span.month, th.next, th.prev, th.switch, span.year', function (e) {
        e.stopPropagation();
    });

Демо

Ответ 2

Принятый ответ не сработал у меня, но я нашел другую работу.

Работа вокруг

$('#your-datepicker')
    .datepicker()
    .on('show', function(e) {
        var $popup = $('.datepicker');
        $popup.click(function () { return false; });
    });

Объяснение

Кажется, что дата-подборщик добавляет свой HTML в конец <body> каждый раз, когда он отображается. HTML для всплывающего окна выглядит примерно так:

<div
    class="
        datepicker
        datepicker-dropdown
        dropdown-menu
        datepicker-orient-left
        datepicker-orient-top
    "
    style="display: block; top: 202px; left: 712.5px; z-index: 1010;">
    <!-- More HTML here -->
</div>

Другие решения предположили, что предотвращение распространения события click может решить проблему. Один из способов реализовать это - обработать событие и вернуть false. Поскольку HTML генерируется каждый раз, когда отображается всплывающее окно, перехват также может быть настроен каждый раз.

Ответ 3

Принятый ответ тоже не сработал у меня, и он тоже не сделал @Sam, хотя он и указал мне на другое решение, которое сработало (спасибо Сэму). Моя проблема заключалась в том, что datepicker находилась в пределах другого складного элемента, который не должен разрушаться при выборе даты и т.д. Здесь мое решение:

    $('#myDatepicker').datepicker().on('click', function () {
        $('.datepicker').click(function(e) {
            e.stopPropagation(); // prevent clicks on datepicker from collapsing 'parent'
        });
    });