[pickers] The field does not work when the format is only composed of escaped characters

[noelleabe]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/embed/mui-x-issue-template-forked-gs9ck7

Steps:

1. Create a DatePicker or MobileDatePicker inside a LocationProvider and provide a dateAdapter.
2. Add a format prop that's completely composed of escaped characters. For example, if using adapterMoment, set format="[test]"
3. Observe that no text is displayed in the DatePicker.
4. In the format prop, add an acceptable token. For example, if using adapterMoment, set format="[test] Y".
5. Observe that all text is displayed correctly in the DatePicker.

Current behavior 😯

When formatted text in a DatePicker or MobileDatePicker is all escaped characters, nothing is displayed. When the formatted text uses a token in addition to escaped characters, the text is correctly displayed.

Expected behavior 🤔

Formatted text that is all escaped characters should be displayed regardless of whether a token exists.

Context 🔦

I want to display the first and last day of the week in a DatePicker. Since a week can start and end in different months or years, no tokens from the value are used.

Your environment 🌎

npx @mui/envinfo

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

System:
OS: macOS 12.3
Binaries:
Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
Yarn: Not Found
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
Browsers:
Chrome: 116.0.5845.179
Edge: 116.0.1938.76
Safari: 15.4
npmPackages:
typescript: ^5.3.0-dev.20230817 => 5.3.0-dev.20230830

Order ID or Support key 💳 (optional)

No response

[flaviendelangle]

Hi,

Thanks for your feedback.
What is your use-case for rendering a date fully escaped?
Do we agree that it won't be editable and that the UX might be counter-intuitive? People will have a date rendered just like any editable date, but this one will not be selectable / editable in any way.

We are not supporting formats with 0 non-escaped token.
We could probably support it, not sure how complex it would be.

[noelleabe]

My use case is that when users select a date, I want to highlight the entire week and display the first and last day of the week, not the selected day itself. For example, if a user selects September 19, the DatePicker would display September 17 - September 23. Currently, I'm calculating those dates separately and passing them into the format prop.

[flaviendelangle]

Make sense
I'll see how hard it is to fix this problem 👍

[noelleabe]

Thank you so much!

[roelvdwater]

I'd like to see this feature as well. We use a DateRangePicker and we'd like to show week numbers in the text field only (e.g. 16 - 18). When passing in WW or any other week number tokens when using the AdapterMoment, it results in an error. A workaround for this would be to calculate the week numbers in a separate function and set this number as the format value. This is also not possible at the moment as specifying an escaped-only value as the format value doesn't work either.

[janakprajapati]

We have similar requirement, a week selector where a text box showing first and last day of the week of the selected day.

We had created a custom component using MUI lab - MobileDatePicker which is working fine (screenshot). However, we are migrating to MUI-X now and facing the issue where the 'renderInput' prop is no longer supported and we need to use 'slotProps' to use 'textField'. However, the 'slotProps' do not support custom 'value' in the 'textField' so, we are looking for a solution.

I think, the propsed solution here (escaped-only value) can work but I am not sure if this is a correct way of doing it.

[flaviendelangle]

I think that if your input does not allow editing, then it should not be an input.
We have an example on the doc on how to replace it with a button for example.

But if you do want to keep an input, then the solution proposed here would work fine.
It should be available in the next alpha release.

As for correct editing of the weeks though the fields and the views, maybe one day we will provide a clean week picker 👍
You can upvote #6297 that is related if you want

[flaviendelangle]

Closes by #10307

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @noelleabe?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.