Insert leading "0"s in hour/minute, days and months

[xppalmeida]

If the user types "0" to insert any value (day, hour, minute or month) the input ends up with "00" before the value.

Example:
Let's say the user wants to type the following date: "04-02-2019 09:05". If the user types exactly these characters sequence below:

0 4 0 2 2 0 1 9 0 9 0 5

It will end up with this value in the screen: 004-002-20199, 005:mm

The desired result would be if the user could (our should/must) insert "04" or "4". Maybe some prop configuration flag?

[david-kimpel]

I'm experiencing this aswell. It seems that it tries to help the user with ease of inputting values like "00:00" but it ends up just being kind of annoying for the user. The leadingZeroes should never be shown when 2 characters are in the user-input of a field.

Explicitly setting the 'showLeadingZeroes' to 'false' (which should be its default value anyway) doesn't do anything to prevent this, which also seems strange to me.

[david-kimpel]

@wojtekmaj Is there any information as to whether you are planning to fix this issue at some point in time or that you are planning it to stay this way? Don't really mind either way, just want to know.

[wojtekmaj]

I'm definitely planning to fix it, it'd be closed with wontfix otherwise! Little time for open source at the moment :(

[tjedrowald]

I am experiencing this issue as well. I did some investigating and it has to do with the fact that the inputs are of type number. This results in a value without the leading zero (even when the user typed it) inside input.jsx. In the situation above the "value" variable contains the value 4, yet the 'input' value shows "04".

This could be fixed by using input type text in combination with a pattern like [0-9]*, but this causes some side-effects right now (probably because the lib expects numbers everywhere).

I hope this helps you out a bit, @wojtekmaj

[MindShaver]

I'm experiencing this specifically when manually specifying time. I recreated this in the online demo example as well.

[pulfabio]

I'm still experiencing this with release 3.0.2.
Is there going to be a fix, or at least a workaround?
Thanks

[wojtekmaj]

This will be fixed, but it needs wojtekmaj/react-date-picker#272 to be merged first. For now, we rely on number inputs (from today's point of view I think that was a mistake), which don't report leading zeros in values, so we're technically unaware of them.

[zyzski]

is it possible that the showLeadingZeros prop being false is causing it to use the default value (true)?

[wojtekmaj]

Fixed in v3.2.0.

[caioaesanto]

Hello, I updated my project with the new version and here is what I noticed:

• The double zero from inserting "0"s in hour/minute, days and months is practically gone, for almost every possible insert. Thank you for the continued improvement of this component.
• Unfortunately the bug continues for specific insertions:
  - If you insert the same value, there is an extra leading 0. For exemple, if the month already is January, and you insert "01", the fix does not work, and you end up with a "001" showing;
  - If you try to insert zero in hour or minute it breaks in two different ways: If you insert "0" it shows "0"; If you insert "00" it shows "000"

Hope my comment helps to further develop this component, and thanks for your time.

[wojtekmaj]

Yeah the above was fixed in wojtekmaj/react-date-picker@ea13ada and not yet released.

[caioaesanto]

Oh nice!
Thanks for such a quick response, and forgive me if I am being a nuisance, but... as far as I understand, this solves the problem with inserting midnight for exemple. But does it also solve the bug of inserting the same input multiple times?

[astreiten]

Thanks for your work, @wojtekmaj. Is there any estimated date for that release?

[wojtekmaj]

Released react-date-picker v8.1.1 and react-time-picker v4.2.1, this should resolve the issue. Please mind that your lockfile may prevent secondary dependencies from being updated without your manual intervention.

[astreiten]

I'm still experiencing the same issue (If you try to insert zero in hour or minute it breaks in two different ways: If you insert "0" it shows "0"; If you insert "00" it shows "000"). This is not happening in the Date Picker component, only in the DateTime Picker. These are the versions that I'm using: react-date-picker v8.1.1,react-time-picker v4.2.1 and React-DateTime-Picker v3.2.0.