Input box shows three digits if a single digit is entered starting with 0 Ex. 01, then it shows 001.

[deepakshr]

Hi Sir,

I recently used this library and found that when I enter a single digit in the input box so for example if I enter 1 , so it will convert it into 01. Now if I enter as 01 , it converts it into 001, so this is the issue it is converting into three digits by adding a leading 0, which is not correct in this case. Even if I enter 01 or 02 , it should reflect 2 digits only, which is not happening.The input box here I mean hour input box as well as minute input box.Could you please help

[onurcanavci]

Is there any development about this?

[pulfabio]

Hi,
I'm experiencing the same problem with react-datetime-picker version 3.0.2.
When can we have the fix?
Thanks.

[KenjiHasegawa]

Hello,

I was having the same issue with version 4.0.1 , but I'm using this workaround:

onTimeKeyDown(e){
        if((e.keyCode == 48 || e.keyCode == 96) && e.target.value){
            e.preventDefault()
        }else if(((e.keyCode > 48 && e.keyCode <= 57) || (e.keyCode > 96 && e.keyCode <= 105)) && e.target.value === '0'){
            e.preventDefault()
        }
    }

<TimePicker
          maxLength="2"
          onKeyDown={this.onTimeKeyDown.bind(this)}
          clearIcon={null}
          disableClock={true}
          format="HH:mm"
          minTime="06:00"
          maxTime="23:59" />

I guess It is not the best solution, but, for now, it helped.

Chrome Version 83.0.4103.116 (Official Version) 64 bits
react-time-picker 4.0.1

[sgoldgar]

I just started using this library and was having the same issue. I was able to work around it (for our use case at least) by just hiding the leading zero using css.

.react-time-picker__inputGroup__leadingZero {
  display: none;
}

Result:
https://media.giphy.com/media/xhCapQDXcplRz526Pe/giphy.gif

Relevant Props:

                <TimePicker
                    value={this.state.inputValue}
                    disableClock={true}
                    clearIcon={null}
                    format={"h:mm"}
                    maxDetail="minute"
                    hourPlaceholder={"H"}
                    minutePlaceholder={"MM"}
                    locale={'en-us'}
                />

[Empty2k12]

What's the status on this? The workarounds are sadly not satisfactory for my use case

[armanelli]

I had to fix this behavior in order to push a feature to production, so I will share my workaround here in case it helps someone until the correct fix comes out.

In short: If the user leaves the field (focusout) and it contains 2 characters, It will remove the 'leadingZero' class. Else it will put it back.

The containerId parameter I used because I can have multiple TimePickers on the same page, so I used this to search for the leading zeros on a specific TimePicker, inside that specific container.

The index parameter its to tell wich leading zero we will hide/show since there can be 3 (one for seconds, minutes, and hours)

// handleIncorrectZeros.js

const HOURS_INPUT_SELECTOR = 'input.react-time-picker_inputGroup_hour';
const MINUTES_INPUT_SELECTOR = 'input.react-time-picker_inputGroup_minute';
const SECONDS_INPUT_SELECTOR = 'input.react-time-picker_inputGroup_second';

const HAS_LEADING_ZERO_CLASS = 'react-time-picker_inputGroup_input--hasLeadingZero';

const getLeadingZeroElements = containerId => (
  document.getElementById(containerId).querySelectorAll('.react-time-picker_inputGroup_leadingZero')
);

const addFocusOutEventListener = (input, containerId, index) => {
  input.addEventListener('focusout', () => {
    if (input.value.length === 2) {
      if (getLeadingZeroElements(containerId)[index]) {
        getLeadingZeroElements(containerId)[index].style.display = 'none';
      }

      input.classList.remove(HAS_LEADING_ZERO_CLASS);
    } else {
      if (getLeadingZeroElements(containerId)[index]) {
        getLeadingZeroElements(containerId)[index].style.display = 'block';
      }

      input.classList.add(HAS_LEADING_ZERO_CLASS);
    }
  });
};

const handleIncorrectZeros = ({ containerId }) => {
  const container = document.getElementById(containerId);

  if (!container) {
    return;
  }

  const hoursInput = document.getElementById(containerId).querySelectorAll(HOURS_INPUT_SELECTOR)[0];
  const minutesInput = document.getElementById(containerId).querySelectorAll(MINUTES_INPUT_SELECTOR)[0];
  const secondsInput = document.getElementById(containerId).querySelectorAll(SECONDS_INPUT_SELECTOR)[0];

  if (hoursInput) {
    addFocusOutEventListener(hoursInput, containerId, 0);
  }

  if (minutesInput) {
    addFocusOutEventListener(minutesInput, containerId, 1);
  }

  if (secondsInput) {
    addFocusOutEventListener(secondsInput, containerId, 2);
  }

};

export default handleIncorrectZeros;

And this is how I call it on my component

// TimeInput.js (my custom component, that uses react-time-picker)

import { handleIncorrectZeros } from './utilities'; // Here's the function created above

import { StyledTimeInput } from './TimeInput.style';

export default function TimeInput({ onChange, value, maxDetail, format, name, ...restProps }) {
  useEffect(() => {
    handleIncorrectZeros({
      containerId: `container-${name}`,
    });
  }, [name]);

  return (
    <div id={`container-${name}`}>
      <StyledTimeInput
        autoFocus
        onChange={onChange}
        value={value}
        maxDetail={maxDetail}
        format={format}
        clearIcon={null}
        disableClock
        {...restProps}
      />
    </div>
  );
}

[Kikketer]

Reported the same in #93 (comment)

[billsaysthis]

@wojtekmaj Any news here? None of the above workarounds really fix the issue in a way we can adopt. Couldn't you just add a maxlength=2 to the minute input?

[wojtekmaj]

maxLength is not supported on numeric input, at least not on all browsers. Move to text input is inevitable.