To participate in the demo you will need:

• Javascript enabled
• A modern browser

Strict Input

The strict input helper will validate itself to the given Moment format. When the input loses focus it will replace its contents with the closest valid match, or erase itself if one cannot be found.

Note: To support the ability to erase an existing date, the "value" is tracked in three potential states:

• Null - actually and explicitly nothing, changing the value to null will erase the current text.
• Undefined - no value set, but retain any existing text value the user has entered.
• String 'x' formatted date.

Taking the given value from the onChange event handler will handle all of this automatically. You will just need to be aware of this behaviour when reading the current value in the parent state.

Loading ...

Direct Use

At its core, React Day Input is just a text input that also displays a calendar. It supports the normal input events for both the text box and the popup.

There is no validation built in by default, and in many cases it is more appropriate to write your own simple validation above the component.

Loading ...