Any event to attach to input type="date" that would fire when the user stops editing the input?

Admin 1
Viewed 267

Chat app. I want to add the functionality to browse chat archives. I have an <input type="date" />; the intention is that the user may use this input to specify which day they want to see the archives from.

Firefox displays a nice calendar for <input type="date" />. When the user clicks the month, Firefox displays a list of months and years for the user to select. Now I of course want to only send the request to the server when the user is done editing the calendar. It is wrong to send the request to server when the user just clicks on the input and starts editing the calendar; it is also wrong to send the request when the user has just selected a year and a month, but not yet a day of this month.

Firing which event should cause the request to the server to be sent?

I tried:

  • onclick - but this fires when the user clicks the input and starts editing the calendar, not when they're done;
  • onsubmit - but this doesn't fire at all;
  • onchange and oninput - but this also fires when the user has just selected a year and / or a month, but not yet a day;
  • onblur - but this requires the user to explicitely click anywhere else and doesn't fire when the user has just clicked a day and the calendar disappears. I think this will be confusing for the user

Is there any other appropriate event?

dom-events javascript
1 Answers

I've created a snippet with two very simple examples how your problem/request could be handled. The first approach targets the already suggested solution (in comments) to use a explicit button. The second approach (the one I mentioned in the comments) uses debouncing (in particular I used Lodash debounce). This approach will handle the date input as follows:

The invocation of the callback function will be delayed until no change event has been detected after 1500 ms (1.5 secs) passed. So if a user stops changing the value of the date for 1.5 secs, the event will be handled and therefore you'll see a log in the console (In your case, you'd send the selected value to the server). You can adjust the delay time as you wish (whatever fits your use case the best) and read the docs I linked above. As far as I noticed, to trigger the change initially, the user has to select every value (day, month, year), so the case where a user only changes month or year or day only should be also covered.

/* Version 1 */

document.getElementById('viewBtn').addEventListener('click', () => {
  const date = document.getElementById('date1').value
  console.log(date);
  // Send the request here
});

/* Version 2 (debouncing) */

document.getElementById('date2').addEventListener('change', _.debounce(event => {
  const date = event.target.value;
  console.log(date);
  // Send the request here
}, 1500));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

<div>
  <h3>Version 1 (Explicit submit)</h3>
  <input id="date1" type="date" />
  <button id="viewBtn">View log</button>
</div>

<div>
  <h3>Version 2 (Debouncing)</h3>
  <input id="date2" type="date" />
</div>

user_39862580
Related