title: Flatpickr: Adding dropdown to change year
body: <p>I am using <a href="https://flatpickr.js.org/" rel="nofollow noreferrer">Flatpickr</a> for my calendar needs. It provides an input field with arrows to change the year. </p>
  
  <p>I need to have a dropdown inside the calendar so that I can select a year from that dropdown and the calendar points to that year subsequently. </p>
  
  <p>I have given a special class <code>.birthDate</code> to the calendar element dynamically. I have added a dropdown to the calendar dynamically, like so: </p>
  
  <pre><code>var currYear = new Date().getFullYear()
  
  var yearOptions = "";
  
  for(var i =  1960; i &lt;= currYear; i++) {
      var option = "&lt;option value = " +  i + "&gt;" + i + "&lt;/option&gt;";
      yearOptions += option;
  }
  
  var yearDropdown = "&lt;select class=\"year-dropdown\"&gt;" + yearOptions + "&lt;/select&gt;";
   $(".birthDate .flatpickr-current-month").append(yearDropdown);
  </code></pre>
  
  <p>The problem is, nothing happens when I click it. My guess is there's some <code>preventDefault</code> method that prevents any click from causing any action. Yet when I add a console statement on click of the dropdown, it appears on the console.</p>
  
  <p>So my question is how do i open the dropdown on click of it. Please find an example of the issue <a href="https://codepen.io/binarytrance/pen/WKoNVJ" rel="nofollow noreferrer">here</a>.</p>