Skip to content

How to set input as invalid state (red) when invalid date #1

Description

@coreysnyder

I've been poking at this for way too long and so I'm coming here in hopes to get help. Is there a way to give the component/input box a red border, or a class, or anything when the entered value is invalid.

So the field isn't required, You click in the input and type 2019-55-55 and tab out. Right now the component doesn't fire the onChange event so I have no hook at responding to changes in the component when an invalid date is entered. Any help would be greatly appreciated!

I tried modifying the component to call this.props.onInvalid() at the end of the handleBadInput() but that led me down a pretty bad path that didn't work. Basically if I do that, I can pass a function to the component for onInvalid which I manually set the class that I need on the container of the component. But this causes a re-render of the component and so the date gets re-set to the previous valid value, since the value isn't updated on state if the input value is invalid.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions