[pickers] How to remove leading 0 from TimePicker?

[httpete]

The problem in depth

https://mui.com/x/api/date-pickers/desktop-time-picker/

Even though I have enUS style American localization, it starts the time with 0 and that really isn't how US folks look at time in the 12 hour format. How can I knock off the first 0?

Your environment

`npx @mui/envinfo`

  System:
    OS: Linux 5.14 Rocky Linux 9.3 (Blue Onyx)
  Binaries:
    Node: 18.19.0 - ~/.asdf/installs/nodejs/18.19.0/bin/node
    npm: 10.2.3 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4 
    @emotion/styled: 11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.23 
    @mui/core-downloads-tracker:  5.15.7 
    @mui/icons-material:  5.11.0 
    @mui/lab:  5.0.0-alpha.166 
    @mui/material: 5.15.11 => 5.15.11 
    @mui/private-theming:  5.15.11 
    @mui/styled-engine:  5.15.11 
    @mui/system:  5.15.11 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.11 
    @mui/x-data-grid:  6.19.5 
    @mui/x-data-grid-pro: 6.19.5 => 6.19.5 
    @mui/x-date-pickers:  6.19.5 
    @mui/x-date-pickers-pro: 6.19.5 => 6.19.5 
    @mui/x-license-pro:  6.10.2 
    @mui/x-tree-view:  6.17.0 
    @types/react: 18.2.60 => 18.2.60 
    react: 18.2.0 => 18.2.0 
    react-dom:  18.2.0 
    typescript: 5.3.3 => 5.3.3 

Search keywords: leading 0, time control
Order ID: 79357

[LukasTy]

Hello @httpete
This happens because in our code we are defaulting the format to one of the hardcoded formats with double digits, based on the ampm prop:

mui-x/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts

Line 51 in 848f2a1

const defaultFormat = ampm ? utils.formats.fullTime12h : utils.formats.fullTime24h;

You can pass a format you want to achieve your desired result: https://stackblitz.com/edit/react-ejhspk?file=Demo.tsx
Do note that you also need to toggle the shouldRespectLeadingZeros prop and be aware of its side-effects.

WDYT @flaviendelangle, could we maybe change the logic, to use utils.formats.fullTime when props.ampm is undefined? Or you know of any problems that it could cause? 🤔
Or do you think this increased format resolving complexity is not worth it? 🤔

[flaviendelangle]

WDYT @flaviendelangle, could we maybe change the logic, to use utils.formats.fullTime when props.ampm is undefined? Or you know of any problems that it could cause? 🤔
Or do you think this increased format resolving complexity is not worth it? 🤔

I don't think it's 100% guarantee that fullTime have the meridiem if and only if is12HourCycleInCurrentLocale returns true.
So one downside could inconsistent behavior.
With that being said, we could modify is12HourCycleInCurrentLocale (and potentially even remove it from the adapter) to use the fullTime format in its check (it's already the case for moment and dayjs from what I see.

I'm clearly nitpicking here.

[httpete]

I just start with what I know 03:00 is not how EN-us wants to see their time.