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 = "+365d";
  $('.datepicker').datepicker({
    //minDate: dateToday,
   //maxDate: maxDate,
    dateFormat: "dd-mm-yy",
    //dateFormat: "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() {
            //alert(thisCalendar.datepicker('getDate'));
            //alert(thisCalendar.datepicker('getDate'));
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker("option", "minDate", null);
            thisCalendar.datepicker("option", "maxDate", null);
            thisCalendar.datepicker("option", "dateFormat", "MM yy");
            thisCalendar.datepicker("option", "minDate", dateToday);
            thisCalendar.datepicker("option", "maxDate", maxDate);
            thisCalendar.datepicker("option", "defaultDate", new Date(year, month, 1));
            thisCalendar.datepicker("setDate", new Date(year, month, 1));//.trigger('change');
            
            //alert(thisCalendar.datepicker("option", "minDate"));
            //alert(thisCalendar.datepicker("option", "maxDate"));
            alert(thisCalendar.datepicker('getDate'));
          }
        }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
      }, 1);
    }

  })