使用 Alpine 创建一个“始终打开的日期选择器”|活线

Posted 2023-03-07

【中文标题】使用 Alpine 创建一个“始终打开的日期选择器”|活线

【英文标题】：Creating an 'always open date picker' with Alpine | Livewire

【发布时间】：2020-11-20 08:35:35

【问题描述】：

我正在尝试使用 Livewire 和 Alpine 创建一个刀片组件作为日期选择器。我使用此处显示的示例：https://laravel-livewire.com/docs/alpine-js，使用 Pikaday。问题是日历仅在我单击输入时显示，并且我希望在页面加载时打开。在这里：https://github.com/Pikaday/Pikaday/blob/master/examples/container.html 有一个关于如何使用它的示例，但我无法“转换”为 Alpine |活线。我能得到一些帮助吗？

P.S.：它不一定是 Pikaday。

【参考方案1】：

你尝试过这样的事情吗？

<div x-data x-init="picker = new Pikaday( field: $refs.datepicker ); $nextTick(() => picker.show())">
  <input type="text" x-ref="datepicker" />
</div>

或者事件更小：

<input x-data x-init="picker = new Pikaday( field: $el ); $nextTick(() => picker.show())" type="text"/>

这个想法是，您需要实例化 Pikaday 或 x-init 中的任何日期选择器 javascript 库，您可以 .show() 实例。

【讨论】：

谢谢！但是现在我有另一个问题，每次选择日期时，Pikaday 都会关闭（或隐藏）

为此，我认为您可以将 bound 选项设置为 false，根据文档“绑定自动显示/隐藏字段焦点上的日期选择器（如果设置了字段，则默认为 true）”