How are people handling HTML-native Date inputs in React?

We've got a <input type="date" /> in our app and I'm struggling to make it work as you would expect.

I've put an example here: https://codesandbox.io/s/romantic-microservice-pg62sq, but the general issue is that if you enter the date using the keyboard (e.g. 01012023 for the 1st of January 2023), it considers it an incomplete date for the 0101 but as soon as you type 2 it sets it to the 1st of January 0002, which due to timezone/calendar reasons gets rendered as Mon Dec 31 0001 23:58:45 GMT-0001 (Greenwich Mean Time) and fills in the control to read 31/12/0001.

At this point you can't recover without having to use the mouse which feels less than ideal.

I know we can avoid this by using defaultValue instead of value, but we've got other things which can update this field, and want to avoid using refs if at all possible

Don't transform the input value and pass it back into the input element. As you can see, it's fragile and can lead to unexpected behavior when rerendering the component.

Unless you are trying to do your own parsing and input formatting, the value stored in state and passed into an input element in React should always be the same as the .value retrieved from the event target. (Also note that the initial value should match as well and always be an empty string).

Instead, if you need to transform value somehow, use derived state (and potentially useMemo), like so:

function getValueForDateInput(value: string): string {
  return !value ? "" : format(new Date(value), "yyyy-MM-dd");
}

export default function App() {

  const [value, setValue] = useState<string>("");
  
  const derivedValue = useMemo(() => getValueForDateInput(value), [value]);
  console.log(derivedValue)

  return (
    <input
      autoFocus
      type="date"
      pattern="####-##-##"
      value={value}
      onInput={(e) => setValue(e.target.value)}
    />
  );
}