HTML

year picker in html

<label for="start">Start month:</label>

<input type="month" id="start" name="start" min="2018-03" value="2018-05">

how to add year picker in html

$(function() {
  $('#datepicker').datepicker({
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, 1));
    }
  });

  $("#datepicker").focus(function() {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
  });

});

//////////
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>

year picker in html

<select id="years">
</select>
<script>
  var currentYear= new Date().getFullYear();

  const yearselect = document.getElementById("years");
  for (let year = currentYear; year > currentYear-150; year--)
  {
    let opt = document.createElement("option");
    opt.setAttribute("value", year.toString());
    opt.innerHTML = " "  + year.toString() + " ";
    yearselect.appendChild(opt);
  }
</script>
<!--  to get the year -->
<script>
  var e = document.getElementById("years");
  var selectedYear = e.value;
</script>