flatpickr/master

FlatPickr Bug

by Mike Cunneen

HTML

<link rel="stylesheet" href="https://gitcdn.xyz/repo/picnicss/picnic/master/picnic.min.css">
<script src="https://npmcdn.com/flatpickr/dist/flatpickr.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/flatpickr.css">
    <h3>
      Flatpickr Bug
    </h3>

    <p>
      <code>onChange</code> event handlers bound to the original input element are being updated with the current time, and then are not updated when this is overridden when <code>setDefaultHours()</code> is called. Try clicking into the input and then clicking out again (blurring) without selecting a date.
    </p>

    <article>
      <input id="timeInputElement" type="text" placeholder="Select Time.." class="date flatpickr-input" readonly="readonly">
    </article>
    <div id="output">
      <p>
        Input currently set to: <span id="outputTarget">nothing yet...</span>
      </p>
    </div>
<footer>
  (for <a href="https://github.com/flatpickr/flatpickr/issues/2084">flatpickr github issue #2084</a>)
</footer>

CSS

html, body {
       padding: 1em; 
       font-size: 90%;
       background-color: #eeeeaa;
     }
     
     article {
        padding: 16px;
        width: 50%
      }

      #output {
        background-color: #eee;
        padding: 16px;
      }

JavaScript

const timeInputElement = document.querySelector("#timeInputElement");
const outputTarget = document.querySelector("#outputTarget");

const fp = flatpickr(timeInputElement, {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
});

timeInputElement.addEventListener(
  "change",
  function(event) {
    outputTarget.innerText = event.currentTarget.value;
  }
); // end addEventListener