How to reject invalid times?

[terebentina]

I am using this for a time input with a mask of 11:11. However, not all digits are ok for a time. Hours over 23 and minutes over 59 should be prohibited.
I have my component which wraps react-maskedinput but that only has access to onChange to read the entered value. How can I reject 3_:__ right away (as soon as the user types 3 for the hour, I know it's wrong) or 27:__ or 14:8_.
I cannot stop this from onKeyDown (as I believe it should be done) as it's not available. I was thinking you should allow props.onKeyDown, call it first in your _onKeyDown() and skip the rest of the function if props.onKeyDown() returns false (or if e.isDefaultPrevented() maybe). This way you allow the users to reject keypresses based on their own logic.

I can send a PR if this sounds ok but I wanted to hear from you first - maybe there's an easier way to do the above that I missed?

[mikhail-denisenko]

You can use the formatCharacters property:

var formatCharacters = {
    'a': {
        validate(char) { return char <= 2; }
    },
    'b': {
        validate(char) { return char <= 3; }
    },
    'c': {
        validate(char) { return char <= 5; }
    }
};
<MaskedInput mask="ab:c1"
             placeholder="00:00"
             placeholderChar="0"
             value="00:00"
             formatCharacters={ formatCharacters }
             onChange={ someOnChangeHandler }/>

This way you'll always get a correct value in your onChange handler.

[boris-ulyanov]

It's not allow input 17:00

[iamdustan]

Closing as @mikhail-denisenko response should allow you to configure this to support this behavior in some capacity.

Alternatively, with #30, you should be able to manage this with your onChange handler and setState back to the previous value.