[pickers] TimeField throws an error when using AdapterLuxon Duration

[LukasPieger1]

Steps to reproduce

Trying to use the TimeField with a Luxon-Adapter results in an error.

Link to live example: https://codesandbox.io/p/sandbox/new-sunset-4kfyyf?file=%2Fdemo.tsx%3A13%2C84

Steps:

1. Change the AdapterDayjs to AdapterLuxon in the codesandbox

Current behavior

Throws an error

Expected behavior

Doesn't throw an error

Context

I am building an android app with capacitor & React and I am trying to use the TimeField as a Duration-picker as demonstrated in this example.

Your environment

npx @mui/envinfo

System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
Binaries:
Node: 21.3.0 - /usr/local/bin/node
npm: 10.3.0 - /usr/local/bin/npm
pnpm: 8.15.1 - /usr/local/bin/pnpm
Browsers:
Chrome: 121.0.6167.139
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.25
@mui/core-downloads-tracker: 5.14.19
@mui/icons-material: ^5.14.1 => 5.14.19
@mui/material: ^5.14.1 => 5.14.19
@mui/private-theming: 5.14.19
@mui/styled-engine: 5.14.19
@mui/system: 5.14.19
@mui/types: 7.2.10
@mui/utils: 5.14.19
@mui/x-date-pickers: ^6.18.4 => 6.18.6
@types/react: ^18.0.17 => 18.2.41
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^4.1.3 => 4.9.5

Search keywords: TimeField AdapterLuxon Luxon Duration LocalizationProvider

Search keywords:

[michelengelen]

Hey @LukasPieger1 ... We currently do not support Duration out of the box.

@LukasTy should we put this on our board or wait for upvotes?

[LukasTy]

As @michelengelen stated, we do not support the notion of Duration yet.
@LukasPieger1 I've tried your code and it immediately fails TS stating that the Duration object is not a valid option. 🙈
Feel free to refactor your solution to one that is more in line with the dayjs solution:

<TimeField
  label="Basic time field"
  format="H'h' m'm' s's'"
  defaultValue={DateTime.fromObject({ hour: 0, minute: 0, second: 0 })}
/>

Maybe you could get by calculating the diff between the set DateTime and the start of the day to get the Duration on your end? 🤔

As for the option to enter actual Duration, there is already an issue for that: #9238 😉

[LukasPieger1]

Oh I see, thank you for your response.
I didn't realize the dayjs solution, that I got the example from didn't use a form of a duration either, very sorry for that😅