TextDayPicker.js

export const TextDayPicker = forwardRef(
  ({ date = '', onChange, format: displayFormat = 'Do MMMM YYYY', ...props }, ref) => {
    const formatDate = newDate => (newDate ? format(newDate, displayFormat) : '');

    const [isEditing, setIsEditing] = useState(false);
    const [value, setValue] = useState({
      raw: date,
      formatted: formatDate(date),
    });

    useEffect(() => {
      onChange(value.raw);
    }, [value.raw]);

    const onFocus = () => {
      setIsEditing(true);
    };

    const onBlur = () => {
      setIsEditing(false);

      // Parse the raw input. This may be a string such as 'Today'.
      const parsedDate = chrono.parseDate(value.raw);

      // If valid, convert it to ISO 8601.
      const newDate = parsedDate ? format(parsedDate, 'YYYY-MM-DD') : null;

      setValue({
        raw: newDate,
        formatted: formatDate(newDate),
      });
    };

    const handleChange = ({ target: { value: raw } }) => {
      setValue(oldValue => ({ ...oldValue, raw }));
    };

    return (
      <Input
        ref={ref}
        value={isEditing ? value.raw : value.formatted}
        placeholder="Enter a date..."
        onFocus={onFocus}
        onBlur={onBlur}
        onChange={handleChange}
        {...props}
      />
    );
  }
);