Question

我正在尝试在CSS / JS中构建一些自定义日期选择器组件。我可以使用jQuery，也可以仅使用普通JS。但是有一个我无法解决的问题。

日期选择器实际上是一个标记为只读的输入框。它位于标签的顶部。只读输入框的不透明度为0，因此您看不到它，但是可以单击/将其聚焦。

当单击该输入元素时，我想使用某些预定义的期间选项（昨天等）打开某种弹出窗口/模式/面板。

当前，我将此面板的开口（.datepicker-calendar）附加到此只读输入的焦点/模糊上。日历打开时将焦点放在该输入上，而模糊则会关闭日历。到目前为止，一切都很好。但是，如果单击日历中的任何位置（如果已打开），则会触发模糊，从而导致日历关闭。这不应该发生。如何确定日历div / panel就像输入的一部分一样？它可能与停止传播有关，但是直到现在我仍未对其进行管理。使用焦点和模糊意味着模糊将在弹出窗口上的click事件之前开始。不确定使用输入元素上的焦点和模糊事件打开和关闭弹出窗口是否明智。

我尝试构建的元素是受Microsoft.EntityFrameworkCore.Relational上的datepicker启发的。单击日期下的“查找航班”，然后将其切换为“灵活日期”（在顶部）。如您所见，您可以单击该弹出窗口中的元素，而不会失去对输入元素的关注，或者不关闭该弹出窗口。他们是如何实现这一目标的？

<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>

重建自定义日期选择器

0 个答案: