Создание "всегда открытого выбора даты" с помощью Alpine | Livewire

Я пытаюсь создать компонент лезвия, используя Livewire и Alpine для выбора даты. Я сделал это с примером, показанным здесь: https://laravel-livewire.com/docs/alpine-js, с Pikaday. Проблема в том, что календарь отображается только тогда, когда я нажимаю на ввод, а я хочу быть открытым при загрузке страницы. Здесь: https://github.com/Pikaday/Pikaday/blob/master/examples/container.html есть пример того, как его использовать, но я не смог "преобразовать" в Alpine | Livewire. Могу я получить помощь?

PS: Это не обязательно должно быть с 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 или любую другую библиотеку JavaScript для выбора даты в x-init и ты можешь .show() экземпляр.

Другие вопросы по тегам