Восстановление пользовательского указателя даты - PullRequest
Новая
       46

Восстановление пользовательского указателя даты

0 голосов
/ 17 марта 2019

Я пытаюсь создать какой-либо пользовательский компонент выбора даты в CSS / JS. Я могу использовать jQuery или просто ванильный JS. Но есть проблема, которую я не могу решить.

Выбор даты на самом деле является полем ввода, помеченным как только для чтения. Он лежит на этикетке. Поле ввода только для чтения имеет непрозрачность 0, поэтому вы не можете видеть его, но вы можете щелкнуть / сфокусировать его.

Когда щелкает по этому элементу ввода, я хочу открыть какое-то всплывающее окно / модальное окно / панель с некоторыми предопределенными параметрами периода (вчера и т. Д.).

В настоящее время я прикрепил открытие этой панели (.datepicker-calendar) к фокусу / размытию этого ввода только для чтения. Календарь открывается с фокусом на этом входе, а при размытии закрывает календарь. Все идет нормально. Но если щелкнуть любое место в календаре, если оно открыто, размытие также будет вызвано, и календарь закроется. Что не должно случиться. Как я могу сделать так, чтобы этот календарь div / панель была как часть ввода? Вероятно, это связано с прекращением распространения, но до сих пор мне это не удавалось. Использование фокуса и размытия означает, что размытие наступит раньше, чем событие щелчка во всплывающем окне. Не уверен, что правильно открывать и закрывать всплывающее окно, используя события фокуса и размытия на элементе ввода.

Элемент, который я пытаюсь создать, вдохновлен средством выбора даты по номеру https://www.dohop.com/. Нажмите в поле Найти свой рейс дату и переключите его на Гибкие даты (вверху). Как вы можете видеть, вы можете щелкать элементы внутри этого всплывающего окна, не теряя фокус на элементе ввода или без этого, это всплывающее окно закрывается. Как они этого добились? 

<form method="GET" class="report-filter-form">
        <div class="filter datepicker">
            <div>
                <div class="datepicker-input">
                    <div class="datepicker-input-container">
                        <span class="datepicker-input-text">2nd quarter 2019</span>
                    </div>
                    <input readonly value="" class="datepicker-input-input" />
                </div>
            </div>
            <div class="datepicker-calendar">
                This will be a absolute positioned div that will open
                when someone focus/clicks on the input element '.datepicker-input-input'.

                <div class="">Jan '19</div>
                <div class="">Feb '19</div>
                <div class="">Mar '19</div>
            </div>
        </div>
        <div class="filter submit-button">
            <button type="submit">Toepassen</button>
        </div>
    </form>
...