JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css">
 <div class="row">
  <div class="adddescr"><label for="date">Zeitraum:</label></div>
  <div class="addinput" id="date"><input type="text" id="datefrom" name="datefrom" class="date" /> - <input type="text" id="dateto" name="dateto" class="date" /></div>
 </div>
 <div class="row">
  <div class="addinput"><label><input type="checkbox" id="dateplanedcheck" /> grobe Planung</label></div>
 </div>

CSS

.calendar-off table.ui-datepicker-calendar {
    display:none !important;
}

JavaScript

$("#datefrom, #dateto").datepicker({
    dateFormat: "dd.mm.yy",
    beforeShow: function(input, inst) {
        if ($("#dateplanedcheck").prop('checked')) {
            $(inst.dpDiv).addClass('calendar-off');     
        } else {
            $(inst.dpDiv).removeClass('calendar-off');
        }
    }
});