[pickers] Change the time placeholder to be `--:-- --` instead of `hh:mm aa`

[nico-martinucci]

What's the problem?

The current placeholder for the TimePicker ("hh:mm aa") is referencing the underlying time formatting, which shouldn't necessarily be something that an end-user should have to know or worry about. We've run into particular confusion over the "aa" placeholder, which can easily be confused with "am" and yet doesn't properly validate. Also, this placeholder does not seem easily customizable.

What are the requirements?

The placeholder should be changed to "--:-- --", which matches the placeholder for the vanilla HTML time input. Alternatively (or perhaps additionally), this placeholder should be more easily customizable.

What are our options?

An alternative (more of a partial solution) would be to simply allow simpler customization of this placeholder.

Proposed solution

As noted above, the proposed solution is to change the placeholder to "--:-- --", which matches the vanilla HTML time input type placeholder.

Resources and benchmarks

No response

Search keywords:

Search keywords:

[DiegoAndai]

Hey @nico-martinucci, thanks for the RFC. I'll transfer this issue to the MUI X repo so the team can review it 😊

[flaviendelangle]

Hi,

You can override the default placeholder as shown in this example

This is a good use case for a recipe in this doc section

As for making it the default behavior, their is no technical challenge here, it's purely a product decision (cc @LukasTy @joserodolfofreitas )

[nico-martinucci]

Hi,

You can override the default placeholder as shown in this example

This is a good use case for a recipe in this doc section

As for making it the default behavior, their is no technical challenge here, it's purely a product decision (cc @LukasTy @joserodolfofreitas )

This worked great, thanks!