Issue: Error When Input Year Value at Datetime Picker

[mukhlish32]

Describe the bug I got this bug when I tried to input the year manually and input it slowly which exceeded the interval (10 milliseconds?) thus making the year invalid causing the calendar to only display 1 or 2 weeks. The error occurs when the year value is only 3 digits.

To Reproduce Steps to reproduce the behavior:

1. Go to documentation of datetime picker or click this ;
2. Click the calendar icon;
3. Input the year manually and slowly (or write the year with only 3 digits)
4. See error (the calendar only display 1 or 2 weeks / invalid calendar). And after this the calendar won't change even I reinput to the correct year.

Expected behavior Show a valid and correct calendar.

Screenshots or Videos Video: https://www.loom.com/share/c435a14a1f764e779eed1fd12a5a3581

Dependencies

• WireUI Version: 1.17.9
• Laravel Version: 9.52.5
• Alpine.js Version: 3.13.2
• Livewire Version: 2.12.3
• Lang: en_US

Additional context Add any other context about the problem here.

[uyab]

My client found the same issue yesterday, after year long development and testing 😀

Will try to dive in this weekend, hopefully can find the root cause.

[uyab]

Updated: it is only happened when using Chrome

[mukhlish32]

Thank you for the information, @uyab . I finally found the solution to make it work in Chrome as well. I conducted tests in Firefox and encountered no issues. It appears that the calendar updates only when the year value is a four-digit. So I added a condition to validate the year value when the input event is executed, ensuring it contains exactly four digits before triggering the fillPickerDates function.

[uyab]

@mukhlish32 which file did you edit?

[mukhlish32]

@uyab I edited the datetime-picker.blade.php file in the components folder. I added a condition to check and trigger if the year variable has a length of 4 characters and set it on x-on event listeners to prevent errors in the application.

[mukhlish32]

Thank you for the update, and sorry to inform so late, I also just found it yesterday, but I found another problem when I clicked the monthPicker component, and next/previous month component when the year digit still != 4. And it give the invalid result like above.

So to make sure that's not gonna happen again, I also add condition if (year.length === 4) on x-on:click as well. This was my edit.