Можно ли сделать так, чтобы при скролинге страницы окно datepicker'a не пропадало?

Question

[shuvalovakris]

Здравствуйте!
Работаю с пикером https://www.daterangepicker.com/
Проблема заключается в том, что когда у меня он открыт,

и я пытаюсь проскроллить страницу, нажимая на верхнюю или нижнюю полосы прокрутки,

стиль моего пикера становится display: none.
При этом если крутить колесико мыши, то стиль не меняется, остается таким же - display: block.

Фрагмент моего кода:

$(function () {
        $(g('js_filter_<?= $id ?>')).daterangepicker({
            autoUpdateInput: false,
            showDropdowns: true,
            autoApply: true,
            locale: {
                monthNames: moment.months()
            }
        }).on('apply.daterangepicker', function (ev, picker) {
            $(g('js_filter_<?= $id ?>')).text('C ' + picker.startDate.format('LL') + ' по ' + picker.endDate.format('LL'));
            $(g('<?= $this->get('idStart') ?>')).attr('value', picker.startDate.format('DD.MM.YYYY'));
            $(g('<?= $this->get('idEnd') ?>')).attr('value', picker.endDate.format('DD.MM.YYYY'));
        }).on('showCalendar.daterangepicker', (ev, picker) => {
            window.addEventListener('scroll', function() {
                picker.container.css('display', 'block');
            });
        });
    });

Здесь я попробовала на событие прокрутки прицепить принудительную установку css-стиля на мой пикер. Но это обернулось тем, что display: block у меня остался вечным.

Основная-то моя задача в том, чтобы можно было прокрутить страницу с открытым пикером, когда он выходит за ширину экрана

Дело в том, что у себя в проекте я самостоятельно настраиваю css-расположение пикера. то есть функцию move() в библиотеке отключила.
Понимаю, что можно сделать так, чтобы пикер не вылазил за окно браузера вообще, но в ТЗ у меня стоит именно такая задача.

Буду благодарна за любую подсказку.

Answer 1

[Алексей Уколов]

outsideClick: function(e) {
    var target = $(e.target);
    // if the page is clicked anywhere except within the daterangerpicker/button
    // itself then call this.hide()
    if (
        // ie modal dialog fix
        e.type == "focusin" ||
        target.closest(this.element).length ||
        target.closest(this.container).length ||
        target.closest('.calendar-table').length
    ) return;
    this.hide();
    this.element.trigger('outsideClick.daterangepicker', this);
},

https://github.com/dangrossman/daterangepicker/blo...

// Bind global datepicker mousedown for hiding and
$(document)
  .on('mousedown.daterangepicker', this._outsideClickProxy)
  // also support mobile devices
  .on('touchend.daterangepicker', this._outsideClickProxy)
  // also explicitly play nice with Bootstrap dropdowns, which stopPropagation when clicking them
  .on('click.daterangepicker', '[data-toggle=dropdown]', this._outsideClickProxy)
  // and also close when focus changes to outside the picker (eg. tabbing between controls)
  .on('focusin.daterangepicker', this._outsideClickProxy);

https://github.com/dangrossman/daterangepicker/blo...

Как видите, никакого конфига для управления этим поведением нет. Вы можете его вырезать из скрипта и добавить какую-то явную кнопку закрытия в сам календарь.

Comments

[shuvalovakris]

огроменное спасибо!!