[pickers][TimePicker] Add views for millisecond editing

[joey-kwl]

Current behavior 😯

I can't type/edit the millisecond part

<TimePicker
	label="End"
	ampm={false}
	disableOpenPicker={true}
	value={endTime}
	inputFormat="HH:mm:ss.SSS"
	onChange={e => {
		console.log(e?.getMilliseconds())
	}}
	renderInput={(params) => <TextField {...params} />}

/>

Expected behavior 🤔

The milliseconds part should change and I should receive the milliseconds inside the onChange function

Steps to reproduce 🕹

Demo: https://codesandbox.io/s/secondstimepicker-demo-mui-x-forked-7in5bw?file=/demo.tsx

Context 🔦

I want a timepicker where you can set/get the milliseconds

Your environment 🌎

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 5.97 GB / 15.93 GB
  Binaries:
    Node: 16.13.1 - D:\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.12.1 - D:\nodejs\npm.CMD
  Managers:
    Maven: 3.6.3 - D:\apache-maven\bin\mvn.CMD
    pip3: 21.3.1 - D:\Python\Python38\Scripts\pip3.EXE
  Utilities:
    Git: 2.21.0. - /mingw64/bin/git
  Virtualization:
    Docker: 20.10.14 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
  IDEs:
    VSCode: 1.69.1 - D:\Microsoft VS Code\bin\code.CMD
  Languages:
    Bash: 4.4.23 - D:\Git\usr\bin\bash.EXE
    Go: 1.17 - D:\Go\bin\go.EXE
    Java: 11.0.13 - /c/Program Files/Java/jdk-11.0.13/bin/javac
    Perl: 5.26.2 - D:\Git\usr\bin\perl.EXE
    PHP: 7.4.30 - C:\tools\php74\php.EXE
    Python: 3.8.6 - /d/Python/Python38/python
    Ruby: 2.4.2 - D:\Ruby24-x64\bin\ruby.EXE
  Browsers:
    Chrome: 103.0.5060.114

Order ID 💳 (optional)

No response

[flaviendelangle]

Indeed, our time components only go to the second

One of the limitation is probably that the mergeDateAndTime method in the adapters only merge up to the second

https://github.com/dmtrKovalenko/date-io/blob/77f89b4859d228ed8f34c740e3defc78d52bdba1/packages/date-fns/src/date-fns-utils.ts#L384

[flaviendelangle]

The first step would be to support the milliseconds on the new fields component
If someone wants to prepare it

For the pickers, once we are able to fallback on the field for some view (like for the hours / minutes / seconds on desktop) it should be pretty straightforward.

[MartinSkarpa]

I'd like to request support for displaying and editing milliseconds in the <TimeField /> component from @mui/x-date-pickers. Currently, the component supports hours, minutes, and seconds, but there is no built-in way to include milliseconds in the input or formatting.

This would be helpful for applications that require precise time editing, such as video editing tools, animation timing, or other domains where sub-second accuracy is needed.

Proposed Solution:

• Allow parsing, displaying, and validating milliseconds in the input.

Motivation

Our company is currently implementing the time code editor consisting of hours, minutes, seconds and frames.
We're displaying the frames instead of milliseconds, that are derived from frame rate (or frames per second).

We are able to transform this time code into JS Date and back. With the help of the value and onChange props of TimeField, we are able to display frames in this component. However, we are forced to store the frames into the year property (to be able parse it into the TimeField). That works fine, but it's very risky approach.

Thank you for considering this!