[question] DateTimeRangePicker onChange behavior

[arjaym-dev]

The problem in depth

Good day, i just have a question for using the dateTimeRangePicker below i will attach the demo for comparing the date range picker & date time range picker

• https://stackblitz.com/edit/react-ben8hy?file=Demo.js here's the demo for date range picker
• https://stackblitz.com/edit/react-jbybvk?file=Demo.js here's the demo for date time range picker

Date range behavior step to reproduce

• after selecting fromDate & endDate e.g Oct 1, 2024 - Oct 2, 2024
• then follow up another change you will notice it always start the change from startDate to endDate which is right

Date time range behavior step to reproduce

• after selecting fromDate & endDate e.g Oct 1, 2024 - Oct 2, 2024
• then follow up another change you will notice that the changes you made only applies on the endDate.

Is there any other way for the date time range behavior to be like whats on the date range ? I cant seems to find what to use from the api

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: DateTimeRangePicker, Date range, mui-x
Order ID: 70493

[LukasTy]

Hello @arjaym-dev,
could you please update your given examples to be as minimal as possible to showcase the issue?
The problems I see with the existing examples:

1. Pickers are not closing.
2. CustomField does not have proper fieldType property set as mentioned here.
3. DateTimeRangePicker has no time renderers. 🤷

[arjaym-dev]

@LukasTy Hello, here's a video to showcase the comparison of date range picker and date time range picker

Is there a way for date time range picker to behave like date range picker when selecting dates

Screen.Recording.2024-10-14.at.8.36.51.PM.mov

Screen.Recording.2024-10-14.at.8.36.23.PM.mov

[arthurbalduini]

Hello @arjaym-dev,

Thanks for providing rich information about your issue.
I see you are implementing a controlled picker and, on your custom DateTimeRangePicker, you are omiting the time views. The picker expects the time selection in order to "conclude" the selection of the start value and move to the end selection, which explains the behavior you are seeing.

Notice that if you select a start date that is after the current end date, it will restart the range selection and you get "stuck" on the start position until you manually choose the end position in the field.

Screen.Recording.2024-10-21.at.15.37.29.mov

I'm not sure what behavior you want to achieve, but I suspect that playing with the view and rangePosition props can help you.

Do not hesitate to ask more questions if you need it 🙂

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.