JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group flex">
  <label for="search-form-depart-date" class="navbar-toggle-addon">Departing</label>
  <div class="inputAddon flex-shrinker flex-grower">

    <input id="search-form-depart-date" type="text" autocomplete="off" class="inputAddon-field datepicker" data-value="" placeholder="select date" readonly>

  </div>
</div>

JavaScript

var dateToday = new Date();
  var maxDate = "+365";
  $('.datepicker').datepicker({
    minDate: dateToday,
    maxDate: maxDate,
    dateFormat: "dd-mm-yy",
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onChangeMonthYear: function(year, month, instance) {
      var thisCalendar = $(this);
      setTimeout(function() {
        var buttonPane = $(instance)
          .datepicker("widget")
          .find(".ui-datepicker-buttonpane");

        $("<button>", {
          text: "Whole month",
          click: function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker("option", "dateFormat", "MM yy");
            thisCalendar.datepicker('setDate', month + "/01/" + year);
            //thisCalendar.datepicker('setDate', new Date(year, month, 1));
						//thisCalendar.datepicker("refresh");
          }
        }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
      }, 1);
    }

  })