[@mantine/dates] TimeInput: Add format and clearable prop

[jerebtw]

Fix for #581 and #580

This also can add a new hook (if wanted) called use-valid-state. (It's similar to useState but accepts a validation function and returns the last valid value, a set value function and the current value)

[rtivital]

• When AmPmInput is focused, there is no way to escape it with keyboard – neither Tab nor Shift + Tab works
• Right/Left arrows should not change am/pm only up and down (to keep things consistent with other fields)
• Please add a separate demo for clearable feature
• Since we are introducing empty field handling, input should be empty if value is undefined
• Current placeholder should be -- : -- : am to be more descriptive
• If field is not filled text should be aligned to the left
• When user enters hours, minutes and seconds should not be autofilled (see video with incorrect behavior)

2022-01-03.17.56.58.mov

[jerebtw]

Since we are introducing empty field handling, input should be empty if value is undefined

Should I add a prop to allow empty fields or this will be a breaking change because we won't have the new Date() as default Value

When user enters hours, minutes and seconds should not be autofilled (see video with incorrect behavior)

This is a problem with the current approach how we save the state because its currently a Date object and if we want your described function then we need to save them individual.

[rtivital]

Should I add a prop to allow empty fields or this will be a breaking change because we won't have the new Date() as default Value

No, that's fine, it's not actually breaking

This is a problem with the current approach how we save the state because its currently a Date object and if we want your described function then we need to save them individual.

Well, I guess it's the only option then

[jerebtw]

@rtivital could you please look at this again, Thanks

[rtivital]

It works fine, great job! There are several issues left to fix, and it can be merged.

[rtivital]

All good, thanks!

[brunovegreville]

Hey everyone, @rtivital @jerebtw !
Thanks for adding a 12-hour format to the TimeInput!
I just wanted to highlight that you might have broken support for non-qwerty keyboards by using event.nativeEvent.code === 'KeyP' and event.nativeEvent.code === 'KeyA' in src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.tsx (versus a classic e.key === "a")

On french keyboards for instance, typing "am" does not change the AmPm input value, but typing qm does (because q maps to KeyA)

Let me know if you can do something about it 🙏
Thanks!

[rtivital]

@brunovegreville do people in France use am/pm time format?

[jerebtw]

Thanks for pointing this out i will look in to it