[fields] Add milliseconds section (format) support

[gulicJan]

Order ID or Support key 💳 (optional)

57828

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

Previously we've been using MUI X v5 and TimePicker which supported timeFormat "mm:ss.SSS" but now as we updated library to v6 we're getting the following error:

Uncaught Error: MUI: The token "SSS" is not supported by the Date and Time Pickers.

And we cannot find a way to support milliseconds format in the TimeField. How can we achieve setting time with milliseconds included?

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 13.2.1 Binaries: Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm Browsers: Chrome: 111.0.5563.146 Edge: Not Found Firefox: Not Found Safari: 16.3 npmPackages: @emotion/react: 11.10.6 => 11.10.6 @emotion/styled: 11.10.6 => 11.10.6 @mui/base: 5.0.0-alpha.120 @mui/core-downloads-tracker: 5.11.13 @mui/icons-material: 5.11.11 => 5.11.11 @mui/lab: 5.0.0-alpha.122 => 5.0.0-alpha.122 @mui/material: 5.11.12 => 5.11.12 @mui/private-theming: 5.11.13 @mui/styled-engine: 5.11.11 @mui/system: 5.11.14 @mui/types: 7.2.3 @mui/utils: 5.11.13 @mui/x-data-grid: 6.0.0 @mui/x-data-grid-pro: 6.0.0 => 6.0.0 @mui/x-date-pickers-pro: ^6.0.3 => 6.0.3 @mui/x-license-pro: 6.0.0 @types/react: 18.0.28 => 18.0.28 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.9.5 => 4.9.5 ```

[flaviendelangle]

Hi,

In v5, the views did not handle the millisecond, when you added a format with the millisecond in the input, how did you make sure that editing via the view did not break everything ?

[flaviendelangle]

Relates to https://github.com/mui/mui-x/issues/5542 (which is more for the view part)

[gulicJan]

So we used the TimePicker like this:

<TimePicker
  ampm={false}
  inputFormat='mm:ss.SSS'
  label='Starting point'
  disableOpenPicker
  value={convertSecondsToDate(trim.input.startTimeInSeconds)}
  onChange={(_obj: string | null, keyboardInputValue: string | undefined) => {
    if (keyboardInputValue) {
      const startTimeInSeconds: number = getValidTimeInSeconds(keyboardInputValue as string, videoDuration);

      if (startTimeInSeconds > Number(trimVideo[index].input.durationInSeconds)) {
        setHasTrimError([...hasTrimError.slice(0, index), true, ...hasTrimError.slice(index + 1, hasTrimError.length)]);
      } else if (hasTrimError[index]) {
        setHasTrimError([...hasTrimError.slice(0, index), false, ...hasTrimError.slice(index + 1, hasTrimError.length)]);
      }

      setTrimVideo((prevState: TrimVideo[]) =>
        prevState.map((trim: TrimVideo, trimIndex: number) =>
          trimIndex === index ?
            { ...trim, input: { ...trim.input, startTimeInSeconds: startTimeInSeconds.toString() } } : trim ),
      );
    }
  }}
  renderInput={(params: TextFieldProps) => <TextField {...params} />}
/>

With the helper function:

export const convertSecondsToDate = (seconds: string) => {
  const date: Date = new Date();
  date.setHours(0, 0, 0, secondsToMilliseconds(Number(seconds)));

  return date;
};

[flaviendelangle]

OK !

I'll have to check if adding the millisecond to the fields is easy. Some of our adapter methods only work up to the second so it might be more complex than anticipated.

I'd suggest staying in v5 for now, we will keep you informed once we support milliseconds correctly :+1:

[mateenkasim]

+1 for this feature!

Adding my support to hopefully get it on the near-term roadmap – have there been any updates on this since last June that aren't tracked in this thread?

[LukasTy]

Thank you for reminding about the importance of this topic. I've added this issue to our grooming board so that we can properly prioritize this issue. 👍

[flaviendelangle]

Relates a lot with https://github.com/mui/mui-x/issues/5542 which is already groomed but also impacts the views.

[LukasTy]

Relates a lot with #5542 which is already groomed but also impacts the views.

Good point. 👌 But this is actually already the "ground work" needed to have proper solution separation:

1. Add the support on Field components with this issue
2. Add the Picker views implementation with the linked issue

[flaviendelangle]

Maybe rename both issues to make the diff between the two extra clear would be nice

[mateenkasim]

Thank you both for the help and for the quick response! 🙏