JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css">
<input type="text" class="period_start">
<input type="text" class="period_end">

JavaScript

Date.prototype.toLocaleFormat = Date.prototype.toLocaleFormat || function(pattern) {
    return pattern.replace(/%y/g, this.getFullYear()).replace(/%m/g, (this.getMonth() + 1)).replace(/%d/g, this.getDate());
};
$(function() {
    $('.period_start').datepicker({
        dateFormat: 'dd.mm.yy',
        onSelect: function(dateText, instance) {
            var period_end = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
            period_end.setMonth(period_end.getMonth('dd.mm.yy') + 6);
            $('.period_end').val(period_end.toLocaleFormat('%d.%m.%y'));
        }
    });
});