onesine
Unable to type dates manually
Hi,
I’m looking for guidance on enabling manual date entry in the date field. When I try to input a date manually (e.g., "2024-12-24"), it doesn’t behave as expected.
Below are examples for both single-date and date-range inputs where the issue occurs:
Single Date:
https://github.com/user-attachments/assets/a60ab518-8cef-430f-9a36-97881f4024c7
Date Range:
https://github.com/user-attachments/assets/b07ecd10-b0c0-48db-946d-68250b4be944
Could you please advise on how to resolve this? Your assistance would be greatly appreciated!
This was definitely something introduced after 1.6.6 as updating this package broke some tests for us
It looks like maybe (don't have time to fully investigate) it's something about how it was switched from using a dayjs instance to just using a datetime. https://github.com/onesine/react-tailwindcss-datepicker/compare/v1.6.6...v1.7.0#diff-bce1fc1770cf6d695fd5eb08107e2b7e159444cd487d5969b5dbca84758a2e67R263
This was definitely something introduced after 1.6.6 as updating this package broke some tests for us
Thanks for the reply. I remember trying some older versions locally, but experienced the same issue.
The issue is that dayjs() is too permissive and will try to create a date from partial inputs. We need to modify the dateStringToDate function to be more strict about what it considers a valid date string
export function dateStringToDate(dateString: string) {
const parseDate = dayjs(dateString);
if (!parseDate.isValid()) return null;
return parseDate.toDate();
}
Hi, The PR does not seem to be merged yet. Can the admins please review and accept the change in the next build? Thanks.
The issue is that dayjs() is too permissive and will try to create a date from partial inputs. We need to modify the dateStringToDate function to be more strict about what it considers a valid date string
export function dateStringToDate(dateString: string) { const parseDate = dayjs(dateString); if (!parseDate.isValid()) return null; return parseDate.toDate(); }
I tried this change in my project, but the issue persists. Even with this modification, it's still not possible to manually input a date. The date keeps resetting to something unexpected, like 01/01/2001, even when I only enter "1". Even if I input a full date, the calendar still doesn't update accordingly. In conclusion, this comment won't resolve the bug with manually entering a date.
@OrionPro The code mentioned in the comment is the one causing the issue, and the fix for it is included in the PR that's pending merge.
https://github.com/onesine/react-tailwindcss-datepicker/pull/310
@bathi-dev I fully implemented the changes from that commit by creating my own fork and integrating it into my project. The fork included all the changes from the mentioned commit. I tested it thoroughly but didn’t see that it actually solves the problem.
I have created this pull request: #320. I hope it will be helpful!
Do these changes solve the problem with manually entering the date?
Yes! I can input the date manually now. Here is a video of my test. I used the regex idea from @bathi-dev, and it works as expected.
https://github.com/user-attachments/assets/b904a445-641a-49c9-a333-e6a4d0751a83
@cba-tavin > Yes! I can input the date manually now Based on my testing, in the single calendar mode it's possible to manually change the date in the input field, but any manual changes are not reflected in the calendar itself. https://github.com/onesine/react-tailwindcss-datepicker/pull/320.
it's now possible to manually type the date into the input field .. which is great . However, the issue is that these manual changes are not reflected in the calendar UI itself.
it's now possible to manually type the date into the input field .. which is great . However, the issue is that these manual changes are not reflected in the calendar UI itself.
Try adding the startFrom prop. It might help reflect manual changes in the calendar UI, but this could be a separate issue.
Try adding the startFrom prop
In my case, using startFrom: field?.value?.startDate || new Date(),helped ensure that the calendar updates its displayed date correctly when the date is manually typed in. I used Controller from React Hook Form. I wonder when these changes will be included in a new version of the library.