用 Alpine 创建一个 'always open date picker' |活线

Question

我正在尝试使用 Livewire 和 Alpine 为日期选择器创建一个 blade 组件。我用这里显示的例子做了：https://laravel-livewire.com/docs/alpine-js, with the Pikaday. The problem is that the calendar only shows when I click the input, and I want to be open when the page loads. Here: https://github.com/Pikaday/Pikaday/blob/master/examples/container.html 有一个关于如何使用它的例子，但我无法 'convert' 到 Alpine |带电。我能得到一些帮助吗？

P.S.: 不一定要和 Pikaday 在一起。

Answer 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"/>

想法是您需要在 x-init 中实例化 Pikaday 或任何日期选择器 JavaScript 库，并且您可以 .show() 该实例。

用 Alpine 创建一个 'always open date picker' |活线

Creating an 'always open date picker' with Alpine | Livewire

laravel

tailwind-css

laravel-livewire

alpine.js