mui
[pickers] Allow same date to be selected with `onChange` event fired
Summary
I am using a StaticDatePIcker in a custom dropdown menu which needs to be closed after the day has been selected. I am using onChange to detect that selection, however, if I press on the same day (which is still a valid use case, because I want to confirm that I want to use the already selected day) the onChange is not triggered.
I saw that there used to be a prop called allowSameDateSelection that allows for that behaviour but for some reason it is removed. Is there any other way to achieve this without customising the days renderer or similar?
Examples
No response
Motivation
No response
Search keywords: static date picker
Well, technically this is correct behaviour, since the value does not change.
@LukasTy can we provide a different "point of entry" for this? Maybe with slotProps.day.onDaySelect?
@michelengelen Thanks for the fast response, indeed it is, but I still need a way to detect that user has clicked on that day in the calendar.
@michelengelen as @AgrYpn1a mentioned, in v5 pickers we can detect same-day selection. We built our scheduling system based on this behavior. Same-day selection provided the toggling functionality. The toggling functionality broke when we tried to update the x-date pickers to v6 because it is no longer firing the selected day if you click on it again.
It would be great to have this function back
OK, I will add this to the board. 👍🏼
I do not think that we might want to fire an onChange as technically the value did not change, but we are likely to find another solution for this.
This is technically the same question as https://github.com/mui/mui-x/issues/12631. This option has been removed in https://github.com/mui/mui-x/pull/4808.
Given the behavior of native date input (it doesn't fire a change event when selecting the same date) I agree that the existing behavior of onChange makes sense, but we could consider changing the behavior of onAccept, where it would be called whenever a selection is being confirmed and users would have the freedom to control the result on their end.
This should allow both requested behaviors:
- a way to identify when users makes a selection
- a way to toggle the selected date if a same date has been selected
WDYT @AgrYpn1a @ReaganS94, would this option cover your use cases? 🤔
+1 to the request and ❤️ the proposal by @LukasTy.
I too need this. I think it is okay that it comes in a separate event like onAccept (or whatever else you like to call it); we get more granular control.
@shrinathaithal thank you for the feedback.
One clarification, the onAccept callback exists and it's behavior is described here.
I had in mind changing the onAccept behavior to be triggered regardless of whether the date has changed.
https://github.com/mui/mui-x/blob/8380f864e51eb329eddd0ac295f4573a2fbbcdea/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts#L104-L112
@AgrYpn1a @codemasterblackperl @shrinathaithal We have given it some more thought and already answered a similar question here: https://github.com/mui/mui-x/issues/12631#issuecomment-2217164477.
WDYT, would relying on the same slotProps.day.onClick callback work for your use cases? 🤔
If not, could you explain your use cases in more detail to make us better understand what is missing? 🙏
@LukasTy Hey thanks for taking time to handle this. While I no longer work on the project where this is needed, I believe this will be perfect for them and will let them know that this is handled. Thank you!
@LukasTy It does help - can you suggest if this approach is recommended? https://github.com/mui/mui-x/issues/12631#issuecomment-2222998866
<MobileDatePicker
onChange={handleChange}
slotProps={{
day: {
onClick: (e) => {
const clickedDay = e.target;
handleChange(moment.unix(clickedDay.dataset.timestamp / 1000));
},
},
}}
{...pickerProps}
{...styleProps}
/>
We agreed to document the proposed solution in the docs. https://github.com/mui/mui-x/issues/12903#issuecomment-2224591387