Mehrere Monate in einem einzigen Feld - wählen Sie Jahr und Monat für jeden Kalender

$("#date").datepicker({
  dateFormat: 'mm.yy',
  changeYear: true,
  changeMonth: true,
  showButtonPanel: true,
  yearRange: '-50:' + new Date().getFullYear(),
  firstDay: 1,
  beforeShow: function() {
  var thisfield=$(this);
  setTimeout(function() {
  if(!thisfield.val()) {
     if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    } else{
    thisfield.val('');
    if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    }
    },200);
  },
  onChangeMonthYear: function() {
  var thisfield=$(this);
  setTimeout(function() {
  if(!thisfield.val() || thisfield.val().length > 12) {
     if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">Start date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    } else{
    if(!$('.addon-header').length){
     $('<div class="ui-widget-header addon-header">End date</div>').insertBefore('table.ui-datepicker-calendar');
     }
    }
    },200);
  },
  onSelect: function(selectedDate) {
    if (!$(this).data().datepicker.first) {
      $(this).data().datepicker.inline = true
      $(this).data().datepicker.first = selectedDate;
       setTimeout(function() {
     $('<div class="ui-widget-header addon-header">End date</div>').insertBefore('table.ui-datepicker-calendar');
     },200)
    } else {
      if (selectedDate > $(this).data().datepicker.first) {
        $(this).val($(this).data().datepicker.first + " - " + selectedDate);
      } else {
        $(this).val(selectedDate + " - " + $(this).data().datepicker.first);
      }
      $(this).data().datepicker.inline = false;
    }
  },
  onClose: function() {
    delete $(this).data().datepicker.first;
    $(this).data().datepicker.inline = false;
  }
})

.addon-header {
  text-align: center;
  padding: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="date"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">