Fix: Ensure date doesn't updates when selecting month and year from dropdown

[muraliSingh7]

As demonstrated by @Devessier in https://github.com/twentyhq/core-team-issues/issues/383. I have made some fixes in DatePicker. Now, the date will remain unchanged when a new month or year is selected.

screen-capture.webm

[muraliSingh7]

Could you please fix the CI failing tests ?

[lucasbordeau]

We need to change the displayed date in the picker if we type in a different date, this is why the tests fail.

[muraliSingh7]

Why storybook command as specified in docs is unable to run locally ?

[lucasbordeau]

Why storybook command as specified in docs is unable to run locally ?

They are but they can be flaky depending on your hardware.

[muraliSingh7]

@lucasbordeau There is FormDateTimeField and FormDateFieldComponent which has their own input to change datetime. The value from those input is passed to DateTimePicker via props called date. Without useEffect you cannot change month and year state variable for these change to propagate or please suggest some methods via which we can achieve it.

This in turn causing two stories to fail the DefaultsToMaxValueWhenTypingReallyFarDate and DefaultsToMinValueWhenTypingReallyOldDate.

Actually there is one more issue which is causing the above DefaultsToMaxValueWhenTypingReallyFarDate stories to fail. The year dropdown has limited values currently the upper limit of year is upto 2030 in AbsoluteDatePicker Component.

const years = Array.from(
  { length: 200 },
  (_, i) => new Date().getFullYear() + 5 - i,
).map((year) => ({ label: year.toString(), value: year }));

If you want from 1900 to 2100 we need to change the above code to this :

const years = Array.from(
  { length: 201 },
  (_, i) => new Date().getFullYear() + 75 - i,
).map((year) => ({ label: year.toString(), value: year }));

But still this will fix test case for temporary we need to make MIN_DATE and MAX_DATE to change when current year changes.

There are some regex issue too in some of the stories like Default and Disabled in FormDateTimeFieldInput.stories. Change new RegExp(12/09/${currentYear} \d{2}:20) to new RegExp(12/09/${currentYear} \d{2}:\d{2})

[Devessier]

@muraliSingh7, I created these components. I will give it a look!

[Devessier]

There is FormDateTimeField and FormDateFieldComponent which has their own input to change datetime. The value from those input is passed to DateTimePicker via props called date. Without useEffect you cannot change month and year state variable for these change to propagate or please suggest some methods via which we can achieve it.

I tested your changes, and it's the expected behavior.

[Devessier]

The calendar does not update when you select a day unavailable in the previous month and then return to the last month.

In my demo, when I select the 31st of October and go to September, if I click on a day, it will choose this day of October, not September. The view of the calendar was not updated when I switched to September.

https://github.com/user-attachments/assets/dd088dbc-8e69-4c40-a031-86ac421a65fa

[muraliSingh7]

@Devessier The date in openToDate logic was wrong thats why the navigation and dates not present in current month was showing up for selection. I have fixed and tested it from my side now it is not showing that issue. Can you please check and confirm whether the issue is fixed or not?

[Devessier]

Identified issues

Expected the next month button to be disabled when user has reached the max date

https://github.com/user-attachments/assets/1553fd02-68c0-4100-bc71-486a32a716a5

Try to use the functions from react-date-picker to go prev/next month

https://reactdatepicker.com/#example-custom-header

Try to use:

decreaseMonth
increaseMonth
prevMonthButtonDisabled
nextMonthButtonDisabled

These functions should limit the edge cases.

[Devessier]

Thank you a lot for your work, @muraliSingh7. I listed a few things you can check.

I can provide some guidance about the failing stories. Would you be willing to review them? Let me know.

[muraliSingh7]

@Devessier Yes sure I will review them. Please let me know what can be done to fix the failing stories issue.

[muraliSingh7]

Thank you a lot for your work, @muraliSingh7. I listed a few things you can check.

I can provide some guidance about the failing stories. Would you be willing to review them? Let me know.

@Devessier I wanted to follow up and inquire if you have any plans in place or if you are currently developing a plan?

[Devessier]

Hello @muraliSingh7, Sorry for the late reply. I have a few urgent tasks to complete now, and digging deeper to fix these issues would take too long. I thank you very much for your hard work on this feature, which I find very valuable, but I will close the PR for now as I can't afford to work on it right now.