Open httpete opened 8 months ago
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:
https://github.com/mui/mui-x/blob/848f2a1d3c40a84aecec4d31e09b3b49cd47903c/packages/x-date-pickers/src/internals/hooks/defaultizedFieldProps.ts#L51
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? 🤔
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.
I just start with what I know 03:00 is not how EN-us wants to see their time.
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