mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.32k forks source link

[pickers] How to remove leading 0 from TimePicker? #12417

Open httpete opened 8 months ago

httpete commented 8 months ago

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?

image

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 commented 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? 🤔

flaviendelangle commented 8 months ago

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 commented 8 months ago

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