multiple flatpickr issue when selecting the second one
I'm having trouble with multiple flatpickrs.
When I click on the first flatpickr it opens and I set the time When I click on the second flatpickr it sets default time and reopens the first one
<!--begin::Input group-->
<div class="fv-row mb-7" wire:ignore>
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2">Attendance Time</label>
<!--end::Label-->
<!--begin::Input-->
<input wire:model.defer="attendance_time" name="attendance_time"
class="form-control form-control-solid"
placeholder="Pick time" id="kt_datepicker_10" data-bs-focus="false"/>
<!--end::Input-->
@error("attendance_time")
<span class="text-danger">{{ $message }}</span> @enderror
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-7" >
<!--begin::Label-->
<label class="required fw-semibold fs-6 mb-2">Departure Time</label>
<!--end::Label-->
<!--begin::Input-->
<input class="form-control form-control-solid" wire:model.defer="departure_time"
name="departure_time" placeholder="Pick time" id="kt_datepicker_11"
/>
<!--end::Input-->
@error("departure_time")
<span class="text-danger">{{ $message }}</span> @enderror
</div>
<!--end::Input group--><pre lang="html"></pre>
<script>
$("#kt_datepicker_10").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
$("#kt_datepicker_11").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
</script>
<pre>
Replies (8)
Apologies for the inconvenience you're facing with the date inputs and Livewire . We'll continue to look into this to find a more concrete solution. If you have any further questions or encounter any other issues, feel free to reach out.
Thank you for your understanding.
Hi Faizal,
Dates working fine with both the flatpicker and Livewire. However, Even after trying wire:model.lazy for inputs, im facing same issue. I also removed the Livewire property, but the problem persists. l'll resort to using the HTML time input until a solution emerges. Thanks!
Hi Basem,
Another possible solution is to use the wire:model.lazy directive instead of the wire:model.defer directive. The wire:model.lazy directive will update the input data only after the input field loses focus, which might prevent the conflict with the flatpickr’s onChange event.
To use the wire:model.lazy directive, you can simply replace the wire:model.defer attribute with wire:model.lazy in your input elements.
Thanks
Hi Basem,
Firstly, have you tried to recompiling the assets using tools like Gulp or Webpack after making modifications? This step can often help resolve conflicts and ensure that changes are properly reflected.
Additionally, try inspect the browser's console log for any JavaScript errors. These logs can provide valuable insights into the root cause of the issue.
Another approach is to temporarily remove the first datepicker to see if it might be contributing to the problem. This can aid in identifying any potential conflicts.
Please feel free to give these suggestions a try, and do let me know if you have any questions or if there's anything else I can assist you with.
Thanks
Hi Faizal,
Thank you for your suggestions. I've taken the time to try out each recommendation:
- Recompiling Assets: I recompiled the assets using tools like Gulp/Webpack after making the modifications.
- Browser Console Inspection: I checked the browser's console log for any JavaScript errors, but there didn't seem to be any direct indications of the problem.
- Removing the First Datepicker: I found that when I removed the first datepicker, the second one works without any issue.
To provide a clearer perspective, I've recorded a short video demonstrating the issue. You can view it here: https://streamable.com/xmq3xb.
I hope this helps in diagnosing the problem further. I appreciate your continued assistance with this matter.
Warm regards,
Hi,
I think the issue might be that you are using the same ID for both flatpickrs. Try using different IDs for each flatpickr and see if that resolves the issue.
Based on your question, It seems you're already using distinct IDs for each flatpickr, which is correct. To troubleshoot further, could you kindly provide more details about the specific problem you're encountering? This would help in identifying the root cause and providing you with an appropriate solution.
Thanks
Hi Faizal,
Can you please specify what additional details you need to further assist me?
<script>
$("#kt_datepicker_10").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
$("#kt_datepicker_11").flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
</script>
