-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Bug]: DatePicker input seems to convert date if not given in the correct date format #15432
Comments
Hello @Jthomp75, isn't it because you tried to put a dd/mm/yyyy on a mm/dd/yyyy input ? If you want to put 19 December 2023, you should do day/month/year (dd/mm/yyyy) and not month/day/year(mm/dd/yyyy) as you did 😄 Will try to see from where is it from and patch this but I don't know if it's a bug or a normal value from an input type date |
What is suppose to be the good patch here actually ? Like what should be expected here ? I'm a bit confused 😅 |
Hi @raphyluke - the weirdness here is around the validation. If I have a DatePicker with the If I input a string, for example, the DatePicker knows that it's not valid and actually clears the input. But if I input a date in a different format to the one that I've provided to the The question really is: should we expect the component to validate that dates provided are in the format that I've provided the component? Or, is the approach that if a user enters the wrong format and gets an erroneous date set, it's on them? |
Hello @erin-hughes ! I agree on this, I was simply confused on the fact that a person try intentionally to put a dd/mm/yyyy on a mm/dd/yyyy. Actually I don't think we have to patch this like : "Someone put mm/dd/yyyy" but if he write "dd/mm/yyyy" we will detect it" because the format wouldn't even make sense. I think that the only patch possible would be the make the input invalid and clear the input. |
Hello! Folks I want to ask you if it is possible to resolve this problem. |
This is issue is rooted in how flatpickr parses dates. When an invalid date is put into a basic flatpickr in jsfiddle, it parses the date to the same value as our component does. flatpickr.date.parsing.movFlatpickr's In any case, the question remains, when given a date of |
I opened an issue on flatpickr: |
After debugging this further, @riddhybansal and I identified the root cause. flatpickr is using the native date methods to format the given date -
So for the case of 34/34/3434, here's how flatpickr builds up the date according to the format:
You can check this out yourself by pasting this snippet into the browser console const date = new Date(new Date().getFullYear(), 0, 1, 0, 0, 0, 0)
date.setFullYear(3434)
date.setMonth(34 - 1)
date.setDate(34)
console.log(date); // Output: Thu Nov 03 3436 00:00:00 GMT-0500 (Central Daylight Time) Based on this it's not |
Package
@carbon/react
Browser
Chrome
Package version
1.4.0
React version
18.2.0
Description
When using a single DatePicker with the calendar, if you enter in a date in a different format, the component ends up with a totally different date selected, almost like it's tried to correct the input to be in the correct date format.
If I have a DatePicker in mm/dd/yyyy format and I enter the following date, 19th December 2023, in dd/mm/yyyy format, the DatePicker updates it to be 7th December 2024 instead.
Reproduction/example
https://react.carbondesignsystem.com/?path=/story/components-datepicker--single-with-calendar
Steps to reproduce
mm/dd/yyyy
format, type 19/12/2023Suggested Severity
Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.
Application/PAL
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: