Situation: There are 101 different date widgets

We’ve trialled a lot of different date selection widgets over the past few years, but none of them have really felt nice. When mounted into a React form they all either:

• Interrupt the user when they are typing, generally because:

  • There was a shorthand formatting match in the middle of the user typing in what they wanted, so the string is replaced with the correctly formatted incorrect date.

  • The date was temporarily in an invalid state when the user started modifying the text value of an existing date, so the entire text contents are wiped.

• Don’t report their value back to the parent in real time from typing, so the parent component is not aware of partial format matches (or worse: does not pass a valid date until the widget has lost focus)

How does React-Day-Input solve these problems?

The base package actually has no opinion on at which point the date should be validated - it simply provides a text input that has a calendar attached. The widget expects both a text value (and handler to change), and a date value (and handler to change).

However for strict dates that should not have a text value other than a validly formatted date outside of when the user is actively typing into it, React Day Input provides a StrictDayInput component.

This component works exactly how you would expect a normal React powered form input to work - it accepts a value data prop and an onChange function prop. Where it differs from other date packages is that it tracks the date value in one of three states:

• Null - actually no value, and no text has been entered into the widget

• Undefined - the user has been typing into the text box, but no valid date can be parsed

• Date - there is currently a valid date that matches what the user has typed in

This setup allows the value to be tracked and updated in real time, without clobbering the text value the user is in the process of typing into. In the event that the parent decides to update the date value to something that is not a result of what’s in the text box, the component automatically updates its text to match.

On the blur event, the component updates its own text to the desired strict formatting, without changing the date value.

The end result is a very simple date picker, that is both intuitive and pleasant to type into.

Check out the demo:

https://uptick.github.io/react-day-input/

Why the name?

All the good names are taken.

What’s next?

Although it mostly behaves like a React form input, it lacks a lot of the other prop options you would expect of an HTML form input. These will be coming soon.

It would also be nice to have configuration options for the calendar pop-over display.

If you’d like to contribute, please check out the github project: https://github.com/uptick/react-day-input

For an interactive sample of the current stable version, check out the demo page at:

https://uptick.github.io/react-day-input

For instructions on how to add react-day-input to your project, head to the readme page:

https://github.com/uptick/react-day-input/blob/master/README.md