flatpickr/master

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">
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
<article>
  <button id="prevBtn">Previous Month</button>
  <input type="text" placeholder="Select Date.." class=date>
  <button id="nextBtn">Next Month</button>
</article>

<hr>

<article>
  <h1>The Problem: </h1>
  <p>
  Clicking on either the “Previous Month” or “Next Month” button invokes the method setDate on the fp instance to set a new selected date. However, when the input is clicked again, the flatpickr still displays the previous date as selected instead of the date set in the setDate() call.
  </p>
  
  <h1>Steps to Reproduce: </h1>
  <p>
    1. Upon loading, click on the input field, flatpickr will show the current month as selected.
  </p>
  <p>
    2. Click on "Previous Month" button, the input field will change to show the previous month as selected.
  </p>
  <p>
    3. Click on the input field again to open flatpickr. The selected date will not correspond to the one shown in the input field
  </p>
  
  
</article>

CSS

article {
  padding: 16px;
  width: 50%
}

JavaScript

const date = new Date()

const fp = flatpickr(".date", {
  defaultDate: "today",
  plugins: [monthSelectPlugin({ shorthand: true })],
})

const prevBtn = document.getElementById("prevBtn")
const nextBtn = document.getElementById("nextBtn")

prevBtn.addEventListener("click", function () {
  date.setMonth(date.getMonth() - 1)
  fp.setDate(date)
})

nextBtn.addEventListener("click", function () {
  date.setMonth(date.getMonth() + 1)
  fp.setDate(date)
})