如何使Pikaday datepicker始终可见

Question

我正在使用Pikaday javascript datepicker.

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

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

有任何想法吗？

Answer 1

起初,我还实施了一个hacky解决方案,但后来我发现了一个常规的方法来使Pikaday datepicker始终可见:

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

以下示例:http://dbushell.github.io/Pikaday/examples/container.html

Answer 2

如果这有助于其他人:

由于Pikaday库并不是真的以这种方式使用,我必须实现一个解决方案.好处是它不需要修改Pikaday代码本身,因此与未来版本完全兼容(假设它们不重命名'隐藏'功能).

首先,我将日期选择器附加到空div并使用css将其移动到正确的位置:

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

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

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

现在,我可以显示日期选择器而不用担心它消失在我身上(因为在内部它会调用新的noop hide功能):

datePicker.show();

最后,当我准备恢复datepicker的原始操作时,我将函数重置为原始函数,并隐藏datePicker(因为我在模态中显示它):

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