如何使 Pikaday 日期选择器始终可见答案

【问题标题】：How to make Pikaday datepicker always visible如何使 Pikaday 日期选择器始终可见
【发布时间】：2014-07-05 10:44:12
【问题描述】：

我正在使用Pikaday javascript datepicker。

默认功能是将其附加到输入，单击输入将加载日期选择器，其位置将相对于输入。

我想要的是使用这个库来显示一个始终可见的日历。我尝试了几件事但没有成功，例如将其附加到 div。我希望能够始终显示它并能够控制它的位置。

有什么想法吗？

【问题讨论】：

jqueryui.com/datepicker/#inline
如果可能的话，我宁愿坚持pickaday。我一直反对 jqueryui 组件。
我想出了一个解决方案，包括将日历附加到 div，然后定位 div，使日历出现在正确的位置。然后，关键是代理日历的 hide() 函数，使其本质上是一个 noop，直到我希望它关闭，此时我恢复其原始功能。这现在工作正常。如果有更好的解决方案，我仍然会保留这个问题。

标签： javascript datepicker visibility pikaday

【解决方案1】：

起初，我也实现了一个 hacky 解决方案，但后来我找到了一种让 Pikaday 日期选择器始终可见的常规方法：

var picker = new Pikaday(
{
    field: document.getElementById('datepicker'),
    bound: false,
    container: document.getElementById('container'),
});

这里的例子：https://pikaday.com/examples/container.html

【讨论】：

【解决方案2】：

如果这对其他人有帮助：

由于 Pikaday 库并不是真的要以这种方式使用，因此我不得不实施一个变通方案。好处是它不需要修改 Pikaday 代码本身，因此与未来版本完全兼容（假设它们不重命名“隐藏”功能）。

首先我只是将日期选择器附加到一个空的 div 并使用 css 移动它直到它在正确的位置：

var datePicker = new Pikaday({
   field: $('#empty-div')[0]
});

然后我只是代理了 Pikaday 的隐藏功能并暂时将其设置为 noop：

var hideFun = datePicker.hide;
datePicker.hide = function() {/*noop*/}

现在，我可以显示日期选择器，而不必担心它会消失（因为在内部它会调用新的 noop 隐藏函数）：

datePicker.show();

最后，当我准备恢复日期选择器的原始操作时，我将功能重置为原始功能，并隐藏日期选择器（因为我在模态中显示它）：

datePicker.hide = hideFun;
datePicker.hide();

【讨论】：