Value of datetime-local with React

Question

I'm doing my first project with React and I've hit a wall in how to use the datetime-local field using the usual React logic.

For any given input field I would do as instructed in the React documentation.

The issue for me is that the datetime-local field has some annoying return-values. It returns an empty string in two cases. One case is when you use the built-in clear button and the other case is when it's set to an invalid date - For example 29th February 2015.

Since this is the case I can't just set the value of the field equal to the value of the event.target.value, since that would reset the field every time someone hits an invalid date. If I tell it to do nothing when encountering an empty return value that means that you can't use the clear button on the field anymore.

I've been unable to find anything related to this issue so I'm hoping that someone in here has an idea to solve it.

Answer 1

The trick to solving this is to use the .validity.valid property of the input field (see https://developer.mozilla.org/en-US/docs/Web/API/ValidityState). If this is false, don't update the React state. This could look like this:

const [ datetime, setDatetime ] = useState('');

<input type="datetime-local"
  value={(datetime || '').toString().substring(0, 16)}
  onChange={handleChange} />

function handleChange(ev) {
  if (!ev.target['validity'].valid) return;
  const dt= ev.target['value'] + ':00Z';
  setDatetime(dt);
}

Answer 2

I've solved this for now by setting the value using the JSX "defaultValue" attribute instead of "value".

This results in the field not being locked by the state variable which in turn makes it possible for me to make an onChange function that always updates the state but doesn't have any effect on the field itself.

By doing so the field behaves as expected and I can just submit whatever value is currently in my state.

The downside to solving it like this is that I'm not able to validate the date. Which means if someone tries to submit an invalid date it will just be stored as null in the database.

If anyone comes up with a more elegant solution I'd be glad to hear it.