[pickers] Unable to use ISO Week in date format for datepickers (using moment)

[DDukers]

Duplicates

• [x] I have searched the existing issues

Latest version

• [x] I have tested the latest version

Steps to reproduce 🕹 Link to live example: https://codesandbox.io/s/elastic-blackwell-eedxj8

Steps:

1. Create a datepicker using Moment.js as date library.
2. Set the format property to "DD-MM-YYYY (WW)"

Expected outcome: The textfield should show the selected date in the format including the ISO Week instead of "(WW)". Example: "17-04-2023 (16)" and not "17-04-2023 (WW)". This was working in version 5 of the datepickers (currently looking to migrate to v6).

Note: Using date-fns as date library gives the same result using "II" for the ISO Week format. Also some other format options (like Era) are not working as well.

[flaviendelangle]

Hi,

What is your use case for rendering the week of the year or the era ? In v5, the editing in the input was mask-based, so any format with a constant length was supported but the editing was not guided (no arrow editing for example).

Now, we have a lot more polished editing behavior, but we need to support each format individually. Week of the year and era are not supported because we did not consider them to be useful. If there is a need, we could either

• Add a notion of read-only section, to easily support the rendering of all of those sections without implementing the editing
• Properly implement the editing (which can take a lot of time and make the overall codebase more complex to reason about, especially for sections that are related to the other sections like it's the case here)

[DDukers]

Hi,

First of all i only mentioned the era because i was trying out some other formatting options Moment.js offers when the ISO week option did not work. The documentation on "Custom Formats" refers to the date library for the full table and no where it is mentioned that certain formatting options are not supported.

The use case i have for the ISO Week is that in my application the user has to pick a week for when an article has to listed in the stores (code will select the monday of that week) or end-listed for the stores (code will pick the sunday of that week). Articles are also grouped based on the type of article with a week-based maintenance 'calendar' (some groups can have gaps in the weeks). So for the user it is useful to see the week number of the date he selected to relate this maintenance calendar. For selecting the date (week) we use the calendar-view and do not use the keyboard editing mode.

My case would be served with the 'read-only section' option and i do agree supporting this kind of sections during editing is too complex.

[flaviendelangle]

The documentation on "Custom Formats" refers to the date library for the full table and no where it is mentioned that certain formatting options are not supported.

We should indeed add a warning there.

[sm-Fifteen]

I'm going to add my vote as well. I'm in a similar boat to DDukers, where I'm migrating an application using old @material-ui/pickers to mui-x pickers v6, and losing the ability to at least format the dates like this would me unable to retain some features.

I have a stats reporting tool where users can specify a range of dates, months, years, weeks or quarters (depending on the aggregation level). While the Quarter and (ISO) Week modes are somewhat clunky (you select a day of the week or a month of the quarter you want and the picker input text then shows the ISO format, while the selection is internally rounded down), they're serviceable enough, and manual input for these is the main way they're intended to be used anyway.

I'll be using v5 for now, but re-adding format support for the other datetime components supported by date-fns/moment/luxon would be very appreciated (even though the use case is somewhat niche).

[iuliab]

Adding my vote as well as I also need to be able to use week number and year on the text field of the date picker for my current project