[pickers] Allow to define the default selected date in the view without setting a value

[sohaibnajjar]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

when the "initialFocusedDate" is set to a specific day and the value is set to null, opening the date dialog and clicking "OK" without selecting a new value will result in the value being set to the "initialFocusedDate". However, if "Cancel" is clicked, the value will remain null.

We are talking about the initial selected day inside the view.
We could introduce a new defaultSelectedValue prop that defines the draft state.

Examples 🌈

We have implemented a hacky solution to mimic the old behavior, but we believe it is dangerous to continue using this method. What are your thoughts on this issue? A demo of this hacky solution can be found in this CodeSandbox link: https://codesandbox.io/s/priceless-wildflower-kggdgu?file=/demo.tsx:0-1259

Motivation 🔦

we have a property called initialFocusedDate on the old version, I tried to use it and there is no property like that in the new MUI-X date pickers.

[flaviendelangle]

Hi,

On the version 5 of our package, you have to control the value (the value and onChange prop are required).
So you just have to pass your initialFocusedDate to value.

On the version 6 of our package (currently in alpha), you have a new defaultValue prop (and the value / onChange prop are now optional).
So you ill be able to pass your initialFocusedDate to defaultValue.
Note that if you pass both value and defaultValue, then defaultValue will be ignored.

I hope it answers your question

[Abdallatif]

Hey @flaviendelangle, in v5 the default focused day is the current day but the default date value is undefined.

And if you provide a default value to change the default focused day, this would result in an unwanted side effects like the input having a default input instead of being empty.

@sohaibnajjar I guess you can achieve a similar effect by overriding the default renderDay to show a different focused date if the value is undefined/null. https://codesandbox.io/s/6wjl7x?file=/demo.tsx

[flaviendelangle]

@Abdallatif if we are talking about the "focused date" as "the date with the pseudo-class :focus active".
Then yes you currently can't decide which date ton focus by default.

You can decide which month to open when on the day view using defaultCalendarMonth (see #5702 to expand this logic to other views).
But you can't focus a specific date that is not the default date.

You could indeed do a custom solution using renderDay, but the picker will probably try to restore the focus to the expected day at some point.

---

Reading the message of @sohaibnajjar, I thought he was talking about the selected value.
Because of the sentence how can I set an initial date for the new MUI-X date pickers?.
In which case, what you are describing does not apply, since it's the goal to select a day.

[flaviendelangle]

Could you describe what you are trying to achieve in your application ?
What is the expected initial behavior when you pass your initialFocusedDate to a picker ?

[sohaibnajjar]

@flaviendelangle
In our application, when the initialFocusedDate is set to a specific day and the value is set to null, opening the date dialog and clicking "OK" without selecting a new value will result in the value being set to the initialFocusedDate. However, if "Cancel" is clicked, the value will remain null. An example of this behavior can be found in the following CodeSandbox link: https://codesandbox.io/s/silent-microservice-0d9fhj?file=/src/App.tsx

In the new date picker, there is no initialFocusedDate. Therefore, if the dialog is opened and "OK" is clicked without making a selection, the dialog will simply close and no value will be selected. An example of this behavior can be found on the Material-UI website: https://mui.com/x/react-date-pickers/date-picker/ Responsiveness => section => MobileDatePicker.

We have implemented a hacky solution to mimic the old behavior, but we believe it is dangerous to continue using this method. What are your thoughts on this issue? A demo of this hacky solution can be found in this CodeSandbox link: https://codesandbox.io/s/priceless-wildflower-kggdgu?file=/demo.tsx:0-1259
cc: @Abdallatif

[flaviendelangle]

OK so we are talking about the initial selected day inside the view.

It is not equivalent to the focused day (in the sense of the browser focus) because you can focus a day with your keyboard without selecting it:

In the image below, the selected day is 1 and the focused day is 6:

---

You can use the defaultCalendarMonth prop to at least be on the correct month.
To select the correct day, we don't have a clean built in solution.
We could introduce a new defaultSelectedValue prop that defines the draft state.

In the meantime, your custom solution is not that hacky 👍

[AlexWeinstein92]

Are any updates on this available? I am in need of setting a default month at the very least, but notice defaultCalendarMonth in now deprecated, and according to this thread there is as yet no solution...

[flaviendelangle]

  /**
   * Default calendar month displayed when `value` and `defaultValue` are empty.
   * @deprecated Consider using `referenceDate` instead.
   */
  defaultCalendarMonth?: TDate;

It weird, the deprecation warning contains the name of the new prop in the code, is this message not displayed on your IDE?

You can find the doc about this new prop here

[AlexWeinstein92]

@flaviendelangle Sorry for leaving this out, I have tried using referenceDate but keep getting an error value.startOf is not a function when passing in a Date

[flaviendelangle]

All our props expects dates in the format of your date library (Date for date-fns but Dayjs object for dayjs)
You probably just have to convert it to a dayjs or moment object depending on your adapter 👍

[AlexWeinstein92]

@flaviendelangle I am not using a Date library, I was trying to use es5.Date ie the standard JS type. I will switching to using moment or dayjs

EDIT: I am using dayjs, I just forgot because I configured it a while ago

[sohaibnajjar]

@AlexWeinstein92 The issue here was that in the old date picker v-4 if you open the popup it will select the date by default then you can click ok without selecting anything and the default date will be set in the date state.

But in the new date picker v-5 if you open the popup you need to select the date first you don't have something called default date we solved it by playing with some internal props like this.

renderDay={(day, selectedDays, pickersDayProps) => { if (!selectedDays.length && day.isSame(moment(), "day")) { pickersDayProps.onDaySelect(moment(), "shallow"); } return <PickersDay {...pickersDayProps} />; }}

In your case, I think they have a prop for the default month in v-5 it was defaultCalendarMonth

[flaviendelangle]

To select a date by default, you can use defaultValue, this should have the behavior you are describing.

[sohaibnajjar]

The idea behind this logic is that I want the user to click ok to set the initial value not before, and if the user didn't click anything I want its value to stay empty. In your solution, the date picker will have a value in the first render.

[AlexWeinstein92]

@sohaibnajjar that is a fair point. By setting referenceDate and using views={['year', 'month']}, I am not seeing a value set on initial open, but after I click a year there is a value set.

It would be preferable to only have the value be set on click of the last view (month in my case) but alas it's not a big enough issue for me to worry about it at the moment