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

Question

I'm trying to create a blade componente using Livewire and Alpine for a date picker. I did with the exemple shown here: 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 there is an exemple on how to use it, but I have not been able to 'convert' to Alpine | Livewire. Can I get some help?

P.S.: It doesn't have to be with the Pikaday.

Answer 1

Have you tried something like this?

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

Or event more minimal:

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

The idea is that you need to instantiate Pikaday or whatever date picker JavaScript library in x-init and you can .show() the instance.