Closed krutsednar closed 1 year ago
Hey @krutsednar,
Please check out the new datepicker guide with LiveWire on the Flowbite Docs.
Cheers, Zoltan
Hey @zoltanszogyenyi the link you've provided is for Pheonix. Not for Livewire. Pheonix uses a live hook situation. Where Livewire is for Laravel. Am I missing something?
Does anyone has a workaround for this issue?
For anyone to land here this javascript solved my issue.
Replace the "date_start" element id by your own input element id value. Replace the "start" with your component attribute name.
<script> window.addEventListener("load", function() { elStart = document.getElementById("date_start"); elStart.addEventListener("blur", (event) => { @this.set('start', event.target.value); }); }); </script>
For anyone to land here this javascript solved my issue.
Replace the "date_start" element id by your own input element id value. Replace the "start" with your component attribute name.
<script> window.addEventListener("load", function() { elStart = document.getElementById("date_start"); elStart.addEventListener("blur", (event) => { @this.set('start', event.target.value); }); }); </script>
I have this problem. This script helps, but doesn't change when date is selected. Only when the input field is not active.
yes, you are right. It should work when the input loses its focus. For other use cases, it may be possible to use another event listener like "change" or "click".
<script> const elEnd = document.getElementById("date_filed"); elEnd.addEventListener("click", (event) => { @this.set('leaveApplication.date_filed', event.target.value); }); </script>
how about this?
Found a better solution! For all Livewire users, here is how to get this working with a model you define in the Livewire side.
First of all, Livewire comes with Alpine.JS, a Powerful and modern JS library.
Per the docs, we are able to listen to custom events, when reading the code of the Datepicker, I found it emits a changeDate
, this event however, has camelCasing
, per HTML reference, attributes cannot have camelCase
names. Thanfully, Alpine provides us with a method, .camel
in order to read events with a camel case, so now, in our input method we can do:
<input datepicker datepicker-autohide type="text"
wire:model="leaveApplication.date_filed"
id="date_filed"
name="date_filed"
class="..,"
placeholder="Select date"
@change-date.camel="@this.set('leaveApplication.date_filed'. $event.target.value)">
Hope this is helpful :)
Found a better solution! For all Livewire users, here is how to get this working with a model you define in the Livewire side.
First of all, Livewire comes with Alpine.JS, a Powerful and modern JS library.
Per the docs, we are able to listen to custom events, when reading the code of the Datepicker, I found it emits a
changeDate
, this event however, hascamelCasing
, per HTML reference, attributes cannot havecamelCase
names. Thanfully, Alpine provides us with a method,.camel
in order to read events with a camel case, so now, in our input method we can do:<input datepicker datepicker-autohide type="text" wire:model="leaveApplication.date_filed" id="date_filed" name="date_filed" class="..," placeholder="Select date" @change-date.camel="@this.set('leaveApplication.date_filed'. $event.target.value)">
Hope this is helpful :)
only one correction
@change-date.camel="@this.set('leaveApplication.date_filed', $event.target.value)">
Coma after 'leaveApplication.date_filed' - work with livewire 3.
Found a better solution! For all Livewire users, here is how to get this working with a model you define in the Livewire side. First of all, Livewire comes with Alpine.JS, a Powerful and modern JS library. Per the docs, we are able to listen to custom events, when reading the code of the Datepicker, I found it emits a
changeDate
, this event however, hascamelCasing
, per HTML reference, attributes cannot havecamelCase
names. Thanfully, Alpine provides us with a method,.camel
in order to read events with a camel case, so now, in our input method we can do:<input datepicker datepicker-autohide type="text" wire:model="leaveApplication.date_filed" id="date_filed" name="date_filed" class="..," placeholder="Select date" @change-date.camel="@this.set('leaveApplication.date_filed'. $event.target.value)">
Hope this is helpful :)
only one correction
@change-date.camel="@this.set('leaveApplication.date_filed', $event.target.value)">
Coma after 'leaveApplication.date_filed' - work with livewire 3.
@change-date.camel="$wire.leaveApplication.date_filed = $event.target.value"
This one is worked for me.
Livewire Component not mounting value of datepicker and is NULL upon selecting date