[pickers] referenceDate not working as expected

[croraf]

Steps to reproduce

https://codesandbox.io/s/infallible-poincare-knhmh5?file=/src/Demo.js

referenceDate is not working as expected. Open the provided picker and observe day, hours and minutes.

Current behavior

1. The provided referenceDate date is modified such that the day is set to the last day of the provided month.
2. Hours and seconds are not set at all.

Expected behavior

When the popup is opened:

1. The provided date should be 18th
2. The provided hours should also be preselected.

[LukasTy]

Thank you for creating this issue! 🙏
The referenceDate prop description is as follows:

The date used to generate the new value when both value and defaultValue are empty.

Based on the issue description it seems that what you are looking for is the defaultValue if you would not be controlling your value or simply initializing the value to the one that you need.
The reference date is useful for setting the default month the calendar should display if the value is empty.
Its time part would be used to initialize the time value after selecting a day.

Could you clarify what you are trying to achieve more specifically so that we can help you in coming up with an implementation suggestion? 🤔

[croraf]

I'm controlling the valute (with value and onChange). My value is initially empty so I need the functionality of referenceDate to set the default just in the popup.

The reference date is useful for setting the default month the calendar should display if the value is empty.
Its time part would be used to initialize the time value after selecting a day.

In the provided sandbox referenceDate does set the default month and year in the popup. But it does not set default day nor time.

[LukasTy]

My value is initially empty so I need the functionality of referenceDate to set the default just in the popup.

This sounds like a really interesting and unique use case you are trying to achieve.
Honestly, I'm not sure if such behavior provides a good UX.
As I mentioned, referenceDate prop is designed to aid in refining the selected date but does not do any value selection on its own. Having your mentioned behavior would mean extra effort and possibly an additional prop and even then there could be problems controlling the value reliably because you would no longer be able to have an empty value. 🤷

Have you considered using a custom implementation to handle your particular use case? 🤔

[croraf]

As I mentioned, referenceDate prop is designed to aid in refining the selected date but does not do any value selection on its own.

The intended functionality of referenceDate prop is exactly what I need. The value needs to be empty. Just the suggested dates in the popup is what I want (which is exactly what referenceDate does).

I see now that hours and minutes do get provided when date is clicked.

But the day provided is wrong! In the provided video day 18 is given to referenceDate prop but 30 is preselected.

simplescreenrecorder-2023-10-23_12.52.49.mp4

[croraf]

And I think it would be better UX that before clicking on the date, the hours and minutes are "presuggested/preselected", so that when clicking on OK immediately, the referenceDate should be given to onChange handler.

[flaviendelangle]

Just to clarify, there is no "pre-suggestion" per say, we are just focusing some day when opening the view and this day is currently value || defaultValue || now.

I do agree that focusing the 30th when the 18th is actually the reference date is not the best behavior.
Because if you click on the hours without selecting a date, it will pick the 18th (as it should) and I would feel it more natural if both behaviors were aligned.

The time part can't have a "pre-suggestion" when opening the picker because they don't have the focus.

Here is the change that would focus the 18th:

diff --git a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx
index 1754dc47f..25c854a99 100644
--- a/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/useCalendarState.tsx
@@ -162,7 +162,7 @@ export const useCalendarState = <TDate extends unknown>(params: UseCalendarState
 
   const [calendarState, dispatch] = React.useReducer(reducerFn, {
     isMonthSwitchingAnimating: false,
-    focusedDay: value || now,
+    focusedDay: referenceDate,
     currentMonth: utils.startOfMonth(referenceDate),
     slideDirection: 'left',
   });

---

And actually yes, before clicking on the date, the hours and minutes should be "presuggested", so that when clicking on OK immediately, the referenceDate should be given to onChange

For this statement, it's not the role of referenceDate as we built-it.
I would be interested to have the opinion of other people on that one, because both can make sense.
Should the referenceDate be used when validating a picker that has no value that has never been modified ?
My personal guess is that it should not

[croraf]

No, the referenceDate should not be validated until confirmed by the user.

But, I'd like the picker popup to have all the views (figures) preselected to the time instant provided. The user can then confirm (immediately after opening the popup) the date that is preselected, that would be then set as the field value.

[LukasTy]

From what you are describing, it seems that you are asking not for a fix in referenceDate behavior, but rather a change in how the defaultValue behaves.
I'd question the UX part of the mentioned behavior because it might not be trivial for every user to understand this behavior flow. 🤔

I'm putting this issue up for grooming so that the team can discuss the best solution. 👍

[croraf]

@LukasTy No. The defaultValue is the defaultValue, it is validated and is set as the initial value of the field in case of an uncontrolled field. referenceDate is just the selection in the popup, when the field value is null/empty/undefined. (It is meaningful to both controlled and uncontrolled fields.)

referenceDate as it is currently working is completely confusing to me as a user:

• I set date to 18th, but the picker has it set to 30th.
• The hours and minutes do get set to the provided referenceDate after picking the date. That is kind of OK, but why not have them preset immediately (such that if user is satisfied with the referenceDate it can immedialtey confirm the referenceDate as the selected value).

What I suggest seems natural behavior for something called popupReferenceDate or popupSuggestedDate or popupDefaultDate (or a combination of these terms).

[LukasTy]

@croraf I've created a PR that is linked to this issue.
It tries addressing the inconsistencies in referenceDate behavior on various views.
Could you please have a look and express your opinion if you agree with the changes?

[flaviendelangle]

This makes me think of #7500

[croraf]

I'll close this in favor of 7500