title: How do I detect when an HTML5 datepicker is closed?
body: <h1>Background</h1>
  <p>I am building a date range picker which uses two HTML <code>type=&quot;date&quot;</code> input elements:</p>
  <p><a href="https://i.stack.imgur.com/ogLVx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ogLVx.png" alt="enter image description here" /></a></p>
  <p>I can detect when the datepicker is closed if the user selects a different date than was previously selected, using the <code>change</code> event. However, if the use selects the same date, the input value doesn't change, and Firefox doesn't fire the <code>change</code> event, or the <code>input</code> event.</p>
  <h1>Example Code</h1>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var dateInput = document.querySelector('[name="dateBegin"]');
  var debugEl = document.querySelector('#debug');
  
  dateInput.addEventListener('click', function(event){
    debugEl.innerHTML += '&lt;br&gt;Event fired: click';    
  });
  
  dateInput.addEventListener('input', function(event){
    debugEl.innerHTML += '&lt;br&gt;Event fired: input'; 
  });
  
  dateInput.addEventListener('change', function(event){
    debugEl.innerHTML += '&lt;br&gt;Event fired: change'; 
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="date" name="dateBegin"&gt;
  &lt;div id="debug"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <h1>Question</h1>
  <p>Is there a way to detect when the HTML datepicker is closed due to user interaction, even if the value of the input doesn't change?</p>